我有一个#comments
元素,其中包含.comment
个元素。我希望从左到右有5条垂直线,每条宽度为1px,高度为100%(直到#comments
元素的末尾),它们之间有20px,没有图像。我试着自己做,但我的CSS-fu并不高。任何帮助将不胜感激。
HTML:
<div id="comments">
<div class="comment level1">Lorem ipsum dolor sit amet</div>
<div class="comment level2">Lorem ipsum dolor sit amet</div>
<div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>
CSS:
#comments {
width: 400px;
border: 1px solid black;
}
.comment {
margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }
以下是我的想法:
|[comment ]
| |[comment ]
| |[comment ]
| | |[comment]
答案 0 :(得分:1)
是否有某些原因需要将所有div作为外部父div的直接子节点?如果你嵌套div,你可以很容易地完成这个:
的CSS:
div div {
border-left: 1px solid black;
padding-left:20px;
}
嵌套html
<div id="comments">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</div>
</div>
更新了小提示,显示它如何嵌套到5级: