jquery - 编辑 CSS 以消除列末尾的边距

Question

我有一个宽度灵活的显示容器，其中包含向左浮动的 li 项。设置了边距，使 li 元素形成一个网格。

问题:如何设置右边最后一个li为margin-right:0以便网格可以与背景完美对齐？

我有一个 JSFiddle ，我现在的代码如下:

CSS:

html, body{margin:0; padding:0; }
.topNav { left:0; right:0; position:absolute; top:0px;
     margin:0 30px 0 30px; text-align:center; height:100px; background-color:grey;
}

.content { margin:130px 30px 0 30px; padding:0; background-color:#999; display:block; float:left; }
.content li{ width:180px; height:280px; background-color:#333; float:left; list-style:none; 
    /* margin:0 0 20px 20px; */
    margin:0 20px 20px 0;
}
.last{clear:both; width:10px; height:10px;  background-color:#999;}

HTML:

<div class="topNav">
</div>

<ul class='content'>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <div class='last'></div>
</ul>

Answer 1

Working jsFiddle Demo

其中一种解决方案是为您的 li 同时使用 left 和 right 边距。将 content 的 margin 更改为:

.content { margin: 130px 20px 0 20px; }

请注意，我将它从 30 减少到 20。现在将 li 的 margin 设置为:

.content li { margin: 0 10px 20px 10px; }

请注意，我不是向 left 或 right 添加 20 边距，而是向每个添加 10。

---

背景

如果你想保留你的内容的背景，你必须改变你的标记:

<div class="ul-container">
    <div class="bg"></div>
    <ul class='content'>
        <li></li>
        <!-- more list item -->
        <li class='last'></li>
    </ul>
</div>

然后在 CSS 中添加此规则:

.content { position: relative; }

.ul-container .bg {
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    bottom: 0;
    background: yellow;
}

Working jsFiddle Demo