Question

有没有人知道为什么两个48％宽度和4％总水平边距的块在没有包装的情况下不能放在同一条线上？简单的事情：

<div style="width: 500px; margin: 0; padding: 0;">
   <div style="width: 48%; margin: 0 0 0 2%; padding: 0; background-color: red; display: inline-block;">A</div>
   <div style="width: 48%; margin: 0 0 0 2%; padding: 0; background-color: red; display: inline-block;">B</div>
</div>

jsFiddle

它让我发疯，它发生在Firefox，Chrome和IE8上。 Windows和Linux。

在我的标准缩放设置下，我可以使用“width：47.5％”将它们放在同一行上。如果它是一致的话，我可以忍受它，但在我的最小变焦时它需要是47.8％，在我的最大变焦时它需要是46.5％。因此，我无法在所有缩放比例中与页面上的其他元素保持一致的空白对齐。

我最初认为这只是一个舍入错误，但由于软糖因素似乎取决于字体大小，因此必须要更多。我可以找到一些方法让我的页面看起来还不错，但我真的想知道它为什么这样做。它会让我今晚继续。

Answer 1

div之间的白色空间构成了额外的空间。由于这些div是内联块，因此它们周围的空白区域被渲染

<div class="should_fit">A</div><div class="should_fit">B</div>

http://jsfiddle.net/cMHgE/4/

Answer 2

将父元素设置为

white-space: nowrap

CSS％宽度不超过100％，差异似乎与字体大小成比例

2 个答案: