负边距

Question

如何从最后一列的每个<li>中删除保证金？当我在每列中有9 <li>和3时，我要求最后一列中的每个<li>。我不是要求仅从我已经知道margin的{{1}}的{{1}}的最后一项中删除<li>

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

所以在任何条件下，任何<ul>（它可以是一个或多个）都在最后一栏。我想删除:last-child { margin-right: 0 }。

所有li都在一个ul

之内

<li>

我在这里添加了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 < em>和 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

我相信这就是你想要的（jquery）：

http://jsfiddle.net/PKstQ/

如果那个小提琴演示你想要做什么（除了边缘而不是背景颜色），那么你不能用css做到这一点。你需要javascript。如果jquery是可以接受的，那么可以很容易地修改那个发布的小提琴。将它变成纯粹的js也是相对微不足道的。

Answer 3

对我而言，给ul左侧的一些填充更加有意义。

我添加了：ul { padding-left: 10px; } - http://jsfiddle.net/GnUjA/30/

取决于是否有必要，但同样真的是顶部：

ul { padding-top: 10px; padding-left: 10px; } - http://jsfiddle.net/GnUjA/31/

Answer 4

编辑：在查看示例HTML后重写了

使用CSS无法实现您的目标。原因是您希望根据渲染的布局设置元素的样式，CSS只允许您根据文档结构工作。

这样的事情只能通过客户端脚本（Javascript）实现，它可以查询呈现的布局属性并相应地执行操作。

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

4 个答案:

负边距

媒体查询