Question

我有一些子div（其中5个）设置为宽度20%。

它们没有填充/边距或边框但它们仍然换行到父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/

Answer 1

罪魁祸首是display:inline-block。因此，您的div开始像真正的内联内容一样，就像文本和链接一样。因此，div之间的空白（它们都在源中的新行上）实际上被渲染，并且在普通字体中占据了少数几个像素，从而推动了5个div的总宽度。父母的大小。

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

Answer 2

您也可以删除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>

Div％宽度似乎不准确

2 个答案: