HTML div divs in divs

我非常简单地试图在div内嵌入5个div。我通过简单地创建一个div来实现这一点，并且在该div中有5个div，宽度为20％，全部使用内联块。HTML div divs in divs

但是，所有即时通讯都是我的div中的4个父div，第5个溢出到下一行。

这怎么会发生？ 5 x 20 = 100％，那么为什么它似乎更多？

enter image description here

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

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

来源

2013-10-25 Darryl Chapman

安置自己的HTML和CSS请。 – j08691

哎呀在这个问题上的错字。纠正。将进入HTML和CSS的pastebin。 –

你有这些元素的填充或边距吗？ – plalx

内联元素对空白很敏感。您可以删除空白的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

来源

2013-10-25 20:15:09 j08691

使用float：left对我来说工作得很漂亮。非常感谢你！ –

Inline-block考虑空白在你的HTML。

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

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

第一个也是最简单的涉及父母的字体大小设置为0，然后，字体大小将需要在孩子复位......箱子

JSFiddle Demo

来源

2013-10-25 20:11:13

内显示的内容只是浮动内部div – puelo

@Paul，我试图设置父母字体大小为0，整个事情变得疯狂。不过我觉得你是对的.. –

HTML div divs in divs

回答

相关问题