Question

我有一个#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; }

Demo

以下是我的想法：

|[comment      ]
|  |[comment   ]
|  |[comment   ]
|  |  |[comment]

Answer 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级：

http://jsfiddle.net/webchemist/tuZB6/4/

带CSS的垂直线条

1 个答案: