我想像这样在 float 元素之间添加线条:
..........................................
. .
. 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 实现这一点？
最佳答案
如果你可以假定每行的元素，你可以用纯 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 - CSS 中 float 列表项之间的水平分隔线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39841592/