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

Question

是否可以缩进显示在summary标记下的详细信息？目前，信息与两个标签保持对齐。

<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>