HTML中的HTML拟合div

Question

我非常简单地尝试在div内部拥有5个Div inline。我这样做只需创建一个div，并在div中有5个div，每个宽度为20％，所有都使用内联块。

然而，所有我得到的是父div中的4个div和第5个溢出到下一行。

怎么会发生这种情况？ 5 x 20 = 100％，为什么它看起来更像？

http://pastebin.com/uS6vcwTM HTML代码

http://pastebin.com/VKHS7swJ CSS代码

Answer 1

内联元素对空白区域敏感。您可以删除div之间的空白区域，如：

<div id="Navigation">
    <div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div>
</div>

<强> jsFiddle example

或者将float:left添加到NavButton课程。

<强> jsFiddle example

Answer 2

Inline-block会考虑HTML中的空格。

这通常等同于.0.25em或4px，具体取决于您的浏览器基本字体大小。

有几种技术可以解决这个问题。

第一个也许最简单的方法是将父级的字体大小设置为0.然后需要在子级中重置字体大小...框

<强> JSFiddle Demo