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

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*                  .
.                                        .
..........................................

*请注意，最后一行的最后一个列表项没有 border/divider 行。

我有纯 UL/LI 元素，不想使用额外的 class 导致看起来很脏 HTML 和不合逻辑的方式。

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

Answer 1

如果你可以假定每行的元素，你可以使用纯 css

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

如果每个宽度有 4 个 li 元素，则可以在每个元素上放置一个底部边框

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

然后 select 最后一行并删除边框。

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

那么就只需要针对每个平台进行媒体查询即可。例如，如果每行有 3 个元素，则可以将所有 4s 更改为 3s

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

Horizontal Divider Line Between Floating List Items in CSS

css

css-float