Div％宽度看起来不准确

我有一些子div（其中5个）设置为20%的宽度。Div％宽度看起来不准确

他们没有填充/边距或边框，但他们仍然换行到父div中的新行。这里有一个例子：

<div id="parent"> 
    <div id="child">Test</div> 
    <div id="child">Test</div> 
    <div id="child">Test</div> 
    <div id="child">Test</div> 
    <div id="child">Test</div> 
</div>

输出显示：

Test  Test  Test  Test 
Test

我CSS：

* { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box 
} 

#parent{ 

width:500px; 
color:white; 
background-color:black;  

} 

#child{ 
    width:20%; 
    display: inline-block; 
    vertical-align:top; 
    text-align:center; 
}

不宜width:20%;工作，5个孩子的div，为什么他们换到一个新的线？？

这里是它在小提琴的动作：http://jsfiddle.net/aeG9q/2/

来源

2013-12-21 Sir

罪魁祸首是display:inline-block。正因为如此，你的div开始像真正的内联内容一样，就像文本和链接一样。正因为如此，div之间的空白（它们全部位于源代码中的新行中）实际上被渲染，并且以普通字体占用少量像素，从而将5个div的总宽度推到父母的大小。

要解决，要么将font-size:0应用于父项（这会导致一些其他问题），要么使用浮动而不是display:inline-block。

来源

2013-12-21 02:07:09

野趣，嗯林不浮动的粉丝，他们是这样的行为对我来说是痛苦！但感谢您的解释，我一直想知道:) – Sir

你可以在两者之间放置html注释，所以差距不再存在：

<！ - 不管这里有多少空间或线路突破，空间不再是 - >

–

您还可以删除空白像this fiddle

<div id="parent"><!-- 
    --><div class="child">Test</div><!-- 
    --><div class="child">Test</div><!-- 
    --><div class="child">Test</div><!-- 
    --><div class="child">Test</div><!-- 
    --><div class="child">Test</div> 
</div>

来源

2013-12-21 02:16:11

+1的建议:) – Sir

Div％宽度看起来不准确

回答

相关问题