html - Li向左浮动，长度动态: no border-bottom on the last row

Question

情况是这样的:

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 来解决这个问题吗？

谢谢。

Answer 1

仅从第四个元素添加 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)) 元素开始。 ~ 是后继兄弟选择器。