CSS:在同一水平行上选择最后一个float <li>

Question

我正在使用以下CSS来安排盒子列表:

 li {
     display: block;
     float: left;
 }

我想仔细调整<li>项目的边距,以便行上的最后一项(水平跨度)获得不同的边距.

是否有任何CSS选择器可以根据其位置定位浮动元素？

Answer 1

通常,您最好的选择是在包含块上创建负右边距,例如:

<ul>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
</ul>

<style>
 li {
     float: left;
     width: 30%;
     margin-right: 3%;
     }
 ul {
     margin-right: -3%; /* compensate for last float %/
     }


</style>

我的例子是匆匆写的,但我注意到外部的负边距不一定相同.你必须摆弄.

这有帮助吗？

Answer 2

您可以使用子 nth-child 选择器来定位它们。

ul li:nth-child(2){
    padding: 2px
}
ul li:nth-child(3){
    padding: 7px
}