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％寬度看起來不準確

回答

相關問題