李浮动左，长度动态：没有边框底部的最后一行 [英] Li float left, length dynamic : no border-bottom on the last row

问题描述

如下：

https：// jsfiddle .net / rpepf9xs /

我想用选择器nth-last-child（）删除边框底部，只有8li在列表中，它会出错，像这样：

  ul {display：block; width：100％; margin：0; padding：0} li {display：block;宽度：33％; height：120px; float：left; margin：0; padding：0; border-bottom：＃666 1px solid;背景：#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>  

谢谢。

解决方案

从第四个元素添加 clear：both 仅 3n + 1 删除第四个元素之后的li的边框

  ul {显示：block; width：100％; margin：0; padding：0} li {display：block;宽度：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） （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>  

$

b $ b

li：nth-​​last-child（4）将是最后一个元素的第四个元素。

从 li：nth-​​last-child（4）元素开始，我们前往 li：nth-​​child（3n + 1）元素（系列像4,7,10 ...），边框不应该从这里开始（ li：nth-​​child（3n + 1））元素。 〜是后继同级选择器。

here's the case:

https://jsfiddle.net/rpepf9xs/

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:

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?

Thanks.

解决方案

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

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

Explaination:-

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

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.

这篇关于李浮动左，长度动态：没有边框底部的最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！