Question

说我有一个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？

Demo

Demo 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 {{} 1}}分别。

如果内容在每个li中都是可变的，那么您可以参考由@web-tiki 创建的演示（感谢您）

Demo ^{（致谢：web-tiki）}

您需要做的就是添加

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

代码，只需注释，删除padding元素上的水平li，否则使用box-sizing: border-box属性来更改框模型行为。

Answer 2

这是一个纯CSS解决方案：

ul {
  width : 500px;
  display: block;
  flex-wrap: wrap;
  display: flex;
}
li {
  list-style-type: none;
  width: 33%;
  border-bottom: 1px solid red;
  text-align: center;
}

Demonstration

Answer 3

您可以执行以下操作：DEMO

使用第n个选择器：

<强> CSS：

*{margin:0;padding:0;list-style:none;}
ul li{float:left;padding:20px;border-bottom:1px solid #ddd;}
ul li:nth-child(3n+1){clear:both;}

Answer 4

我建议这个解决方案：

<强> CSS

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

ul > li:nth-child(3n+3) {
    padding-right: 0;
}

li{
    float:left;
    list-style-type: none;
    padding-right: 15px;
    border-bottom: solid 1px;
    padding-bottom: 15px;
    padding-top: 15px;
}

fiddle

Answer 5

您可以尝试以下方法：

ul li{
  float:left;
  display:block;
  width:100px;
}

修改宽度，以便显示项目。

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

5 个答案: