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

Question

如何从<li>最后一列中删除保证金？<li>当我<li>在每列中有9 和3 时,我要求最后一栏中的每一个.我不要求只是删除margin从去年最后一个项目<li>的<ul>,我已经知道:last-child { margin-right: 0 }

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

所以在任何条件下<li>(最后一列中都有一个或多个).我想删除margin-right.

所有的李都在一个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

除非您确切地知道每行有多少元素(通过nth-child()选择器族),否则无法使用纯CSS来删除或添加每行的特定元素上的样式.

负边距

在边距的情况下你可以做的是通过在父元素上添加负边距来伪装它们.这将给出一个错觉,即您的子元素适合父元素,同时在各个元素之间仍有间距:

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在祖先元素上添加以防止水平滚动,具体取决于容器元素与视口边缘的接近程度.

媒体查询

如果您可以合理地预测每行将有多少项,则可以使用媒体查询来定位行中的最后一项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. */

Answer 2

编辑：查看示例 HTML 后重写答案

你想做的事用CSS是不可能的。原因是您想要根据呈现的布局设置元素的样式，而 CSS 只允许您根据文档结构进行工作。

这样的事情只能通过客户端脚本（Javascript）来实现，客户端脚本可以查询渲染的布局属性并采取相应的操作。