css - HTML 在 div 中拟合 div

Question

我只是想在一个 div 中内联 5 个 div。我通过简单地创建一个 div 来做到这一点，并且在该 div 内部有 5 个宽度为 20% 的 div，所有这些都使用 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 示例

或者添加float:left到NavButton班级。

jsFiddle 示例

Answer 2

Inline-block考虑 HTML 中的空格。

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

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

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

JSFiddle 演示