css计算（100%/5），其中的边距在

你能用css计算使5，20%宽度的div浮动成一行等于100%吗。我的目标是让5个div向左浮动，每个div之间有1%的利润。目前，我不得不使用first of type删除第一个div的边距，以尝试将其与容器的左侧完美对齐。使用calc方法有更好的解决方案吗？我想我的问题是，我不知道在cacl中应该包括哪些利润

ul{
宽度：500px；
}
李{
宽度：计算值（100%/5）；
背景：蓝色；
浮动：左；
列表样式：无；
左缘：1%；
}
李：第一种{
左边距：0px；
}

一,
二,
三,
四,
五,

在这里您根本不需要使用calc，因为您的div的宽度将始终为20%（宽度为1%的边距，使其在一行中的宽度为19%）

演示：

ul{
宽度：500px；
}
李{
宽度：19.2%；
背景：蓝色；
浮动：左；
列表样式：无；
左缘：1%；
}
李：第一种{
左边距：0px；
}

一,
二,
三,
四,
五,

虽然您可以这样做，但这似乎有点毫无意义。这是你的小提琴：

问题是增加了李的利润：

li {
  margin-left: 1%;
}

就像网格一样，边距增加到宽度的外侧，这意味着您实际上拥有105%的宽度，而不是100%。请确保使用填充，并在其中嵌套一个div，其中包含所需的内容：

li {
    background:blue;
    padding: 5px;
}
li div {
    background: red;
}

---

您需要在宽度计算中包含

1%

边距。比如：

width: calc((-1 * 1%) + (100% / 5));

请看这里：

ul{
宽度：500px；
}
李{
宽度：钙（-1*1%）+（100%/5））；
背景：蓝色；
浮动：左；
列表样式：无；
左缘：1%；
}
李：第一种{
左边距：0px；
}

一,
二,
三,
四,
五,

实现这一点实际上还有一个小技巧（这就是Bootstrap3网格系统的基础）。您应该在包装器的左右两侧添加一个负边距，该边距等于块之间的间距。这样，您就不必删除第一个块上的左边距和最后一个块上的右边距。事实上，它们将与边缘完美结合，因为边缘刚好溢出包装。用我不太流利的英语来表达有点困难，所以看看这个：

编辑：

使用这种技术的正确方法实际上是这样的：

 ul {
        margin: 0 -.5%; /* this is the magic! */
    }
    li {
        width:19%;
        background:blue;
        float:left;
        list-style:none;
        margin-left:.5%;
        margin-right:.5%;
    } 

---

这样，您可以将边距分布在左侧和右侧。不过，您必须在某些包装器元素上设置宽度，正如我在fiddle中演示的那样，您并不真正需要

calc

函数来实现这一点。您只需手动进行计算：

（100%-4%边距）/5个元素=19.2%宽度（非19%）

但是，您需要将左边距仅应用于最后四个列表项（

li:not（：type的第一个）{margin left:1%；}

），或者将其从第一个列表项中删除（就像您已经做的那样）

ul{
宽度：500px；
}
李{
宽度：19.2%；
背景：蓝色；
浮动：左；
列表样式：无；
左缘：1%；
}
李：第一种{
左边距：0；
}

一,
二,
三,
四,
五,

您有5个

li

s，其中4个

1%

边距在左侧

所以你应该做

calc（96%/5）

而不是

calc（100%/5）

---

演示：

我永远无法正确连接小提琴，我的问题您使用

计算器有什么原因吗
100%/5
只会得到20%，那么为什么不首先使用20%呢？或者我在这里遗漏了什么？如果我这样做，我认为所有5个div都将是相邻的，之间没有空白。我想知道calc方法是否可以将100%分割5，然后还包括它们之间的边距，但不包括第一个或最后一个与边缘接触的分割边。我考虑的另一个解决方案是增加盒子尺寸：将盒子填充到div中，并将它们全部填充，使每个div之间都有空间。但同样，第一个和最后一个div不会接触容器的侧面，会有一个小间隙。如果我这样做，那么我将在5个div之间有4个gabs，19%x5=95%这意味着每个保证金需要为1.25%？我只是想知道是否有一种方法可以让calc方法为我做这个数学计算？这并不是calc函数的真正用途。当你有两个不同的单位，并且在这两个单位之间进行“计算”转换时，就会用到它。哈哈，是的！我确实觉得这个把戏有点脏，但即使我将ul更改为100%，它仍然是一致的。请注意，这并没有利用
li
s可用的最大宽度，
li
s比它们可能的宽度要窄。实际上使用负边距是完全可以的，并且在所有浏览器中都得到了很好的支持。我承认这感觉有点不自然，但事实并非如此，TB3使用它是有原因的。@arbel你完全正确。我的更新应该是正确的。非常有趣的技术，但它似乎在最右边缺少1px-
 ul {
        margin: 0 -.5%; /* this is the magic! */
    }
    li {
        width:19%;
        background:blue;
        float:left;
        list-style:none;
        margin-left:.5%;
        margin-right:.5%;
    }