情况是这样的:
https://jsfiddle.net/rpepf9xs/
我想用选择器删除border-bottom: "nth-last-child()",但是,如果列表中只有8个“li”,就会出错:
ul {
display: block;
width: 100%;
margin: 0;
padding: 0
}
li {
display: block;
width: 33%;
height: 120px;
float: left;
margin: 0;
padding: 0;
border-bottom: #666 1px solid;
background: #fcc
}
li:nth-last-child(3),
li:nth-last-child(2),
li:last-child {
border-bottom: 0px
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
有什么办法可以不用 javascript 来解决这个问题吗?
谢谢。
最佳答案
仅从第四个元素添加 clear:both
3n+1
元素。删除最后一个第四个元素之后的 li 的边框
ul {
display: block;
width: 100%;
margin: 0;
padding: 0
}
li {
display: block;
width: 33%;
height: 120px;
float: left;
margin: 0;
padding: 0;
border-bottom: #666 1px solid;
background: #fcc
}
li:nth-child(3n+1) {
clear:both;
}
li:nth-last-child(4) ~ li:nth-child(3n+1), li:nth-last-child(4) ~ li:nth-child(3n+1) ~ li {
border-bottom: 0px;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
无论你有多少里,这段代码都会移除最后一行的底部边框
解释:-
li:nth-last-child(4)
将是倒数第四个元素(边框移除应在该元素之后开始)。
所以从 li:nth-last-child(4)
元素开始,我们向 li:nth-child(3n+1)
元素移动(哪个系列像4,7,10...) 并且边框不应该从这个 (li:nth-child(3n+1)
) 元素开始。 ~
是后继兄弟选择器。
关于html - Li向左浮动,长度动态: no border-bottom on the last row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40627203/