如何在每个第三个li元素中添加一条水平线？

Question

编辑:真正的问题http://jsfiddle.net/5C4n5/2/

假设我有一个固定宽度的UL列表

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
</ul>

在视觉上,我希望将水平分隔线分隔为3个项目的每一行

item1 | item2 | item3
_____________________

item4 | item5 | item6
_____________________

item7 | item8 | item9

如果我要使用表格,我可以将边框应用于TR元素.但在UL上,行没有标记.有没有可以使用的CSS技巧？

Answer 1

为什么不使用简单border-bottom的li？

演示

演示2 (使用:nth-last-child()伪删除最后一行的边框)

ul {
    margin: 20px;
    width: 170px;
}

ul li {
    padding: 10px;
    float: left;
    border-bottom: 1px solid #aaa;
}

ul:after {
    clear: both;
    content: "";
    display: table;
}

如果要删除最后一个元素的边框使用

ul li:last-child,
ul li:nth-last-child(2),
ul li:nth-last-child(3) {
    border-bottom: 0;
}

这里没有什么复杂的东西我需要解释,ul:after尽管如此,我已经用它来自我清除元素,因为它包含浮动li元素.

并删除最后一排边境,我已经使用:last-child和:nth-last-child()假点,其选择最后li,倒数第二li和倒数第三li分别.

如果每个内容都是可变的,li你可以参考@ web-tiki 创建的演示(谢谢你)

演示 ^{(学分:web-tiki)}

您需要做的就是添加

ul li:nth-child(3n+4){
    clear:left;    
}

转码,只是一个说明,删除水平padding上li的元素,使用别的box-sizing: border-box属性来改变盒子模型的行为.