css - HTML 适合 div 中的 div

Question

我只是想在一个 div 中内联 5 个 Div。我通过简单地创建一个 div 来做到这一点，并且在该 div 内部有 5 个 div，每个 div 的宽度为 20%，全部使用 inline-block。

但是，我得到的只是父 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