css - 如何从行中最后一个元素的每个元素中删除边距？

Question

如何从每个 <li> 中删除边距最后一列？我要求每个 <li>当我有 9 <li> 时出现在最后一栏中每列 3 个。我不只是要求删除 margin从最后一项 <li>的 <ul>我已经知道了:last-child { margin-right: 0 }

如果屏幕很小或用户调整浏览器大小，则 3 + 3 + 3 可以变为 4 + 5 或 2 + 2 + 2 + 2 + 1

所以在任何情况下任何<li> (它可以是一个或多个然后是一个)出现在最后一列中。我想删除 margin-right .

所有li都在一个ul内

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
   <li>item 7</li>
   <li>item 8</li>
   <li>item 9</li>
</ul>

我在这里添加了 jsfiddle:http://jsfiddle.net/GnUjA/1/

Answer 1

在每一行的特定元素上删除或添加样式不能使用纯 CSS 完成，除非您确切知道每行有多少个元素(通过 nth-child() 选择器系列) .

负边距

对于边距，您可以做的是通过在父元素上添加负边距来伪装它们。这会给人一种错觉，即您的子元素适合父元素，同时各个元素之间仍然有间距:

http://codepen.io/cimmanon/pen/dwbHi

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

将边距分成两半并在两侧设置(margin-left: 5px; margin-right: 5px)可能比单边距(margin -right: 10px)，尤其是当您的设计需要使用 LRT 和 RTL 方向时。

注意:这可能需要在祖先元素上添加 overflow-x: hidden 以防止水平滚动，具体取决于容器元素与视口(viewport)边缘的距离。

媒体查询

如果您可以合理地预测每行将有多少项，则可以使用媒体查询通过 nth-child() 定位行中的最后一项。这比使用负边距要冗长得多，但它允许您进行其他样式调整:

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}
/* etc. */