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

【问题标题】：Can I indent the details tag information that shows beneath a summary tag display?我可以缩进显示在摘要标签显示下方的详细标签信息吗？
【发布时间】：2021-12-27 00:05:30
【问题描述】：

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

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

我尝试过 text-indent，但它会缩进摘要信息而不是详细信息。

【问题讨论】：

注意负文本缩进和填充可能一起工作：jsfiddle.net/naLxk6wodetails { padding-inline-start:2rem; } details summary { text-indent:-2rem; }

标签： css css-selectors

【解决方案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>

【讨论】：

谢谢。一旦你知道它似乎很简单:)

【解决方案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>

【讨论】：

谢谢。如果需要，我可以选择变得更详细:)