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

工作 jsFiddle 演示

解决方案之一是为您的 s使用两者left和right边距。将您的li更改为：margincontent

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

请注意，我将其从 减少30到20。现在将marginof设置li为：

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

请注意，我没有在or中添加20边距，而是在每个中添加了边距。leftright10

---

背景

如果你想保留你的背景content，你必须改变你的标记：

<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;
}

工作 jsFiddle 演示

Answer 2

你有没有尝试过：

ulSelector > li:last-child{
   margin-right:0;
}