Question

我想在浮动项之间添加这样的行：

..........................................
.                                        .
.    LI LI LI LI LI LI LI LI LI LI LI    .
.    --------------------------------    .
.    LI LI LI LI LI LI LI LI LI LI LI    .
.    --------------------------------    .
.    LI LI LI LI LI LI*                  .
.                                        .
..........................................

*请注意，最后一行的最后一个列表项没有边框/分隔线。

我有纯粹的UL / LI元素，不想使用额外的类导致看起来很脏的HTML和非语义方式。

如何使用纯CSS完成此操作？

Answer 1

如果您可以假设每行的元素，您可以使用纯css

执行此操作

示例：http://codepen.io/nilestanner/pen/yaPgzj

如果每个宽度有4个li元素，则可以在每个

上放置一个底部边框

li{
  float:left;
  width:25%;
  border-bottom: 1px solid black;
}

然后选择最后一行并删除边框。

li:nth-child(4n+1):nth-last-child(-n+4),
  li:nth-child(4n+1):nth-last-child(-n+4) ~ li {
    border:none;
}

然后，只需要为每个平台进行媒体查询。如果每行有3个元素，则可以将所有4个元素更改为3个，例如

CSS中浮动列表项之间的水平分隔线

1 个答案: