左立浮动，长度动态:最后一行没有边底

here's the case:

情况是这样的:

I want to remove the border-bottom with selector: "nth-last-child()", however, if there are only 8 "li" in list, it goes wrong like this:

我想用选择器删除边-底:"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>

Is there any way to fix this without javascript?

有没有什么方法可以不用javascript解决这个问题?

Thanks.

谢谢。

3 个解决方案

#1

add clear:both only 3n+1 element from the forth element. remove border for the li that is after the forth element from last

添加clear:仅来自forth元素的3n+1元素。从last元素中移除第四个元素后面的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>

This code will remove last row's border bottom no matter how many li you have

这个代码将删除最后一行的边框底部，不管您有多少li

Explaination:-

解释:

li:nth-last-child(4) will be the forth element from last(border removal should start after this element).

李:最后一个子元素(4)将是最后一个元素的第四个元素(边界清除应该从这个元素之后开始)。

So starting from li:nth-last-child(4) element we travel towards the li:nth-child(3n+1) element (which series like 4,7,10...) and the border should not be there starts from this (li:nth-child(3n+1)) element. ~ is the successor siblings selector.

因此，从li:nth-last-child(4)元素开始到li:nth-child(3n+1)元素(如4、7、10…)和边界不应该从这个元素开始(li:nth-child(3n+1))元素。~是后续的兄弟选择器。

#2

Yes because you are missing clear:both. Whenever playing with float, don't forget to add clear:both or else it will give error of blank space if space is not settled in good way.

是的，因为你错过了清楚:两者都有。在玩浮球的时候，不要忘记添加清楚:如果空间没有得到良好的解决，这两种方式都会给空格带来错误。

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>
  <div style="clear:both;"></div>
</ul>

#3

Just add box-sizing: border-box to li to solve the issue. And for the border-bottom issue you can link nth-childs and nth-last-childs:

只需在li中添加box- size: border-box来解决这个问题。对于边底问题，你可以把nth-childs和nth-last-child联系起来:

li:nth-last-child(3):nth-child(3n+1),
li:nth-last-child(2):nth-child(3n+2),
li:nth-last-child(2):nth-child(3n+1),
li:last-child {
  border-bottom: 0px;
}

Also it would be good to clear the floats after its context (see a good example here) using this:

使用以下方法清除浮动也很好(请参阅这里的一个例子):

ul:after{
  content:'';
  display:block;
  clear:both;
}

See demo below:

请参见下面的演示:

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;
  box-sizing:border-box;
}
li:nth-last-child(3):nth-child(3n+1),
li:nth-last-child(2):nth-child(3n+2),
li:nth-last-child(2):nth-child(3n+1),
li:last-child {
  border-bottom: 0px;
}

ul:after{
  content:'';
  display:block;
  clear:both;
}

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

#1