Question

有人可以解释为什么div不适合一行吗？所有的div都有20％的宽度减去20px。前四个div的边距为25px。 20 * 5 = 100px 25 * 4 = 100px

我不明白。

HTML ：

.one-fifth{
   width:calc(20% - 20px);
   display:inline-block;
   background-color:red;
}
.one-fifth:not(:last-child){
    margin-right:25px;
}

CSS ：

{{1}}

这里有一个JSFiddle：https://jsfiddle.net/d6dw7bcL/1/

谢谢！

Answer 1

空格增加宽度。

将它们评论出来：

</div><!--

--><div>

参见工作示例here。

但评论只是最简单的方法。在CSS-Tricks.com上解释了许多其他方法（其中一些在其他答案中解释）。

Answer 2

确实div之后的空白是问题所在。要仅使用CSS删除空格，您只需float元素：

.one-fifth {
   float: left;
}

JSFiddle

Answer 3

我通常使用注释来直观地分隔div，但保留它们没有空格。像这样：

<div class="one-fifth">1</div><!--
--><div class="one-fifth">2</div><!--
--><div class="one-fifth">3</div><!--
--><div class="one-fifth">4</div><!--
--><div class="one-fifth">5</div>

Answer 4

最初我认为这是边缘问题，但真正的问题是内联块。如果你真的必须使用inline-block，你可以选择一些改变html代码的解决方案，并使用注释来删除这个间距。我宁愿定义这个对CSS的责任，所以你可以用font-size：0定义一个父div，并覆盖div中的font-size。见这个例子

body {
  margin: 0;
}
.parent {
  font-size: 0;
}
.one-fifth {
  width: calc(20% - 20px);
  display: inline-block;
  background-color: red;
  letter-spacing: 0;
  font-size:12px;
}
.one-fifth:not(:last-of-type) {
  margin-right: 25px;
}

<div class="parent">
  <div class="one-fifth">
    1
  </div>

  <div class="one-fifth">
    2
  </div>

  <div class="one-fifth">
    3
  </div>

  <div class="one-fifth">
    4
  </div>

  <div class="one-fifth">
    5
  </div>
</div>

CSS3 calc得到100％的宽度

4 个答案: