编辑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

其中一个解决方案是为left使用right和li页边距。 将margin的{​​{1}}更改为：

content

请注意，我将其从.content { margin: 130px 20px 0 20px; } 缩减为30。现在将20的{​​{1}}设置为：

margin

请注意，我没有向li或.content li { margin: 0 10px 20px 10px; } 添加20页边距，而是向每个页面添加了left。

---

背景

如果您想保留right的背景，则必须更改标记：

10

然后在CSS中添加此规则：

content

Working jsFiddle Demo

Answer 2

你试过了吗？

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