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

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>

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

- jmrker

---

注意负的text-indent和padding可能会一起使用：https://jsfiddle.net/naLxk6wo/details { padding-inline-start:2rem; } details summary { text-indent:-2rem; } - G-Cyrillus

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>

- recursive

---

谢谢。一旦你知道了它，它看起来非常简单 :) - jmrker

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>

- KrassVerpeilt

---

谢谢。看起来如果需要的话，我有更详细的选项 :) - jmrker