如何使用CSS制作正确的马赛克？

Question

我有一个常见的问题，我从来不知道如何用CSS解决：

在此示例中：http://cssdesk.com/5s6eH

如何保持li和ul宽度以及li之间的10px，每行3 li？

编辑：我正在寻找一种通用的解决方案，不需要提前知道列数。

Answer 1

nth-child magic。可能不适用于旧版本的IE。

li:nth-child(3n+3) {
  margin-right: 0px;
}

http://cssdesk.com/p4VTX

Answer 2

您显然必须指定哪些元素不希望有边距。您需要知道您将拥有多少列表元素以及您想要的列数，这些都是您的问题。除非您非常幸运，否则您将无法访问所有客户的新{CSS}规则选择器，例如n'th子项等。如果你这样做，那么这里的另一个答案是“更好”。

然后是添加另一个CSS规则的问题：

.last {
  margin-right:0;
}

并指定最后一列元素：

<ul>
  <li></li>
  <li></li>
  <li class="last"></li>
  <li></li>
  <li></li>
  <li class="last"></li>
</ul>

http://cssdesk.com/bBx5y