Question

你可以使用css calc来使5％，20％宽度的div连续浮动到100％。我的目标是剩下5个div，每个div之间有1％的余量。目前我必须使用first-of-type从第一个div中删除边距，以尝试将其与容器的左边完美对齐。使用calc方法可以解决这个问题吗？我想我的问题是我不知道在哪里将边距包含在cacl中。

ul {
    width:500px;
}
li {
    width:calc(100%/5);
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}
li:first-of-type{
    margin-left:0px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

https://jsfiddle.net/qrd702dj/

Answer 1

实际上有一个诀窍（这是Bootstrap 3网格系统所基于的）。您应该在包装器中添加左边距和右边距，等于块之间的间距。这样，您不必删除第一个块上的左边距和最后一个块上的右边距。实际上它们将与边缘完美对齐，因为边距刚好溢出包装。在我不那么流利的英语中用文字说话有点难，所以看看这个：

https://jsfiddle.net/qrd702dj/3/

ul {
    width:500px;
    margin: 0 -1%; /* this is the magic! */

}
li {
    width:19%;
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}

编辑

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

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

https://jsfiddle.net/qrd702dj/7/

这样，您可以在左侧和右侧展开边距。你必须在某些包装元素上设置你的宽度，正如我在小提琴中所展示的那样

Answer 2

这里你根本不需要使用计算器，因为你的div的宽度总是20％（宽度为1％的边距，使其宽度为19％，以适合单行）。

演示：

ul {
    width:500px;
}
li {
    width:19.2%;
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}
li:first-of-type{
    margin-left:0px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Answer 3

虽然你可以做到这一点，但似乎有点无意义。这是你的小提琴纠正：

https://jsfiddle.net/qrd702dj/2/

问题是给李的增加了保证金：

li {
  margin-left: 1%;
}

就像网格一样，边距会增加宽度的外部，这意味着你的宽度实际上是105％而不是100％。确保使用填充代替并使用您想要的内容嵌入div：

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

Answer 4

您需要在宽度计算中包含1%边距。类似的东西：

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

见这里：

＆＃13;

ul {
    width:500px;
}
li {
    width: calc((-1 * 1%) + (100% / 5));
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}
li:first-of-type{
    margin-left:0px;
}

＆＃13;

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

＆＃13;

Answer 5

你真的不需要calc功能。您可以手动执行计算：

（100％ - 4％保证金）/ 5个元素= 19.2％宽度（不是19％）。

但是，您需要将左边距应用于最后四个列表项（li:not(:first-of-type) { margin-left: 1%; }）或将其从第一个列表项中删除（就像您已经做过的那样）。

＆＃13;

ul {
  width: 500px;
}
li {
  width: 19.2%;
  background: blue;
  float: left;
  list-style: none;
  margin-left: 1%;
}
li:first-of-type {
  margin-left: 0;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

＆＃13;

Answer 6

您有5个li个，其中4个在左边有1%个边距。

所以你应该calc(96% / 5)而不是calc(100% / 5)

演示： https://jsfiddle.net/qrd702dj/5/

css计算（100％/ 5），计算中的边距

6 个答案: