Wesleywai Wesleywai - 24 days ago 6
HTML Question

Li float left, length dynamic : no border-bottom on the last row

here's the case:

https://jsfiddle.net/rpepf9xs/

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

Answer

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>