Question

我在<ul>容器内有一个width: 100%;。

每个<li>都有width: 25%;。

我希望在margin-left元素上有一个li，但这会将宽度设置为％。

以下是显示问题的小提琴：http://jsfiddle.net/u3hTW/

要更正此问题，我可以将box-sizing应用于li元素并使用padding代替margin，但“踢球者”是我想要的nth-child(1)没有margin或padding，导致它与其他li元素不同。

这是一个小提琴，显示：http://jsfiddle.net/u3hTW/1/

我想知道是否有更好的方法来接近这一点。目标是保持基于％的宽度，除了第一个孩子之外的所有人都有空间。

Answer 1

问题是，您已经在使用每个li元素的100％x 4x25％宽度。所以当你添加保证金时，最后一个会跳过＆＃39;因为＆lt;容器div的25％仍然存在。

你能做的是：

让你的小一点，如23％左右，并使用百分比作为你的利润。需要进行一些计算，以确保所有内容均匀分布。
使用flexbox（请检查browsersupport是否符合您的要求）可以在这里查看这个相对较新的css boxmodel的完整指南，正如Chris Coyier所做的那样：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我建议您使用％作为宽度和边距。

.list li {
    float: left;
    width: 23%;
    margin-left: 2.66%;
}

.list li:nth-child(1) {
    margin-left: 0%;
}

一般来说，为了获得容器之间的间距，我更喜欢边距，因为以后你可能需要内部填充其他东西，或者遇到填充的跨浏览器框大小问题。

Answer 3

这是使用cjspurgeon建议的方法来计算列宽的公式：

w = 100 - 2mc
    ---------
        c

位置：

w =列宽

m =以％表示的边距

c =列数

常数100 = 100％，即列的总宽度+边距。常数2是考虑的两个边距（左右）

因此，假设您想要6列，左右边距为1.7％：

w = (100 - 2(1.7 * 6)) / 6

w = 13.2666％

您的选择器如下所示：

.column {
  width: 13.2666%;
  margin: 1.7%;
  float: left;
  /* whatever else is required */
}