问题:

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:

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.

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

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.

回答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: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>

转载请标明出处:Li float left, length dynamic : no border-bottom on the last row

文章来源: Li float left, length dynamic : no border-bottom on the last row

标签

nth-child

border-bottom

last

element