Li float left, length dynamic: no border-bottom in the last line

Question

here is the case:

https://jsfiddle.net/rpepf9xs/

I want to remove the border-bottom with the selector: "nth-last-child ()", however, if there are only 8 "in the list", this happens incorrectly:

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>

Run codeHide result

Is there any way to fix this without javascript?

Thank.

Answer 1

add clear:bothonly the 3n+1element from the fourth element. remove the border for li, which after the fourth element from the 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>

Run codeHide result

This code will remove the lower border of the lower border, no matter how much you have

Explaination: -

li:nth-last-child(4) will be the fourth element of the last (border deletion should begin after this element).

, li:nth-last-child(4), li:nth-child(3n+1) (, 4,7,10...), (li:nth-child(3n+1)). ~ - siblings.

Answer 2

, clear:both. , , : , , .

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>

Hide result

Answer 3

box-sizing: border-box li, . border-bottom nth-child nth-last-child s:

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

It would also be nice to clear the floats after its context (see example here ) using this:

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

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

Run codeHide result