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

简而言之，没有。浏览器应用CSS以呈现页面。完成渲染后，CSS无法知道元素的实际位置。

您需要修改HTML标记，以便实际上可以使用CSS选择器，或者您需要使用可以按顺序分析相关元素位置的JavaScript确定要修改哪一个。

Answer 3

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

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

Answer 4

使用'margin-left'。如果你在父容器上使用margin-right：-3％，并且它的宽度是页面的100％，你将得到一个水平滚动条。

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

4 个答案: