我可以缩进显示在摘要标签显示下方的详细标签信息吗？

Question

是否可以缩进摘要标签下显示的详细信息？ 目前，信息与两个标签均左对齐。

    <details> Details 1
     <summary> Summary 1 </summary> 
    </details>
    
    <details>
     <summary> Summary 2 </summary> 
     Details 2
    </details>
    
    <details> Details 3
     <summary> Summary 3 </summary> 
    </details>

我尝试过文本缩进，但它缩进了摘要信息而不是细节。

Answer 1

负边际似乎效果很好。

details {
  margin-left: 2em;
}

summary {
  margin-left: -2em;
}

<details> Details 1
 <summary> Summary 1 </summary> 
</details>

<details>
 <summary> Summary 2 </summary> 
 Details 2
</details>

<details> Details 3
 <summary> Summary 3 </summary> 
</details>

Answer 2

使用边距或填充，您可以设置其样式。带填充的示例：

details > summary {
  background-color: #888;
  cursor: pointer;
  padding: .5rem 1rem;
}

details > summary > * {
  display: inline;
}

details > div {
  border: 2px solid #888;
  margin-top: 0;
  padding: 35px;
}

  <details> 
    <div>Details  1 </div>
     <summary> Summary 1 </summary> 
  </details>
    
    <details>      
     <summary> Summary 2 </summary> 
     <div>Details  2 </div>
    </details>
    
    <details> 
     <summary> Summary 3 </summary> 
      <div>Details  3 </div>
    </details>

Answer 3

对我有用的是，使用 the :not() CSS 伪类，为除摘要之外的所有细节留出左边距，如下面的“添加的 css 规则”所示。

不幸的是，您可能必须继续相信，因为在预览中，运行代码片段不起作用，所以也许它不支持 :not()？

/* added css rule */
details > :not(summary) {
   margin-left: 2em;
}

<details> Details 1
 <summary> Summary 1 </summary> 
</details>

<details>
 <summary> Summary 2 </summary> 
 Details 2
</details>

<details> Details 3
 <summary> Summary 3 </summary> 
</details>