內嵌塊元素看起來沒有理由破解行嗎？

我有一些非常基本的HTML/CSS，不像我期望的那樣工作。基本上我有我的身體設置爲400px寬。然後我在身體內部有兩個div，顯式寬度爲300px和100px。此外，這兩個div都設置爲display: inline-block。出於某種原因，100px div突破了主體的內容區域，並出現在其下方。我不知道爲什麼會發生這種情況。如果我將寬度從100px設置爲96px，則可以。但是，如果將其設置爲97px，98px，99px或100px，則不起作用。我覺得這種行爲很奇怪。有人可以解釋發生了什麼問題嗎？內嵌塊元素看起來沒有理由破解行嗎？

請注意，我正在通過Chrome（Beta Channel）測試此功能。代碼如下。

的CSS：

body { 
    margin: 4px; 
    width: 400px; 
    height: 250px; 
    border: 1px solid black; 
} 

.list-container { 
    display: inline-block; 
    width: 300px; 
    height: 100%; 
    background-color: red; 
} 

.button-container { 
    display: inline-block; 
    width: 100px; 
    height: 100%; 
    background-color: blue; 
}

的HTML：

<body> 

<div class="list-container"> 
</div> 

<div class="button-container"> 
</div> 

</body>

來源

2011-06-08 void.pointer

您是否嘗試過設置'margin：0;兩個元素的填充：0'？他們是否有任何「邊界」設置？ – 2011-06-08 20:34:39

@David：我檢查了Chrome開發人員工具，但沒有看到任何這些Div的填充，邊框或邊距。另外，最終計算出來的CSS似乎沒有包含任何意想不到的東西。 – 2011-06-08 20:35:53

雖然這可能無法解決您的問題，但更常見的是看到這兩個元素是浮動的，而不是使用內聯塊定位。 – Wex 2011-06-08 20:37:25

這是因爲white-space在html中崩潰的原因。

如果從兩個div元素，一切都很好之間移除換行符：

<div class="list-container"> 
</div><div class="button-container"> 
</div>

JS Fiddle demo。

你可以，也只是註釋掉的S div之間：

<div class="list-container"> 
</div><!-- 

--><div class="button-container"> 
</div>

JS Fiddle demo。

甚至設置font-size爲零的body元素（但你必須重新定義它的子元素，很明顯：

body { 
    margin: 4px; 
    width: 400px; 
    height: 250px; 
    border: 1px solid black; 
    padding: 0; 
    font-size: 0; 
}

JS Fiddle demo

來源

2011-06-08 20:43:48

引人入勝 - 我從來不知道這件事發生，並且在明顯誤認爲空白被忽略的情況下運作。很高興知道。 – kinakuta 2011-06-08 20:47:52

'display：block'元素之間的白色空間摺疊到基本上什麼都沒有。但是'inline'和'inline-block'元素之間它會摺疊成單個空格字符。 – 2011-06-08 20:48:49

這是很棒的信息，謝謝。我會用花車代替，因爲我不知道內聯塊是在後方痛苦多了:) – 2011-06-08 20:54:02

這是在你的身體保證金：

margin: 4px;

由於保證金計爲總寬度的一部分。 300px爲第一個+ 100px爲第二個div + 8px（任一側爲4）爲margin = 408px。這迫使第二個股票下降到下一行。

我實際上有點驚訝，它在96工作。它的行爲就像它只佔一邊的邊緣。我希望它只能在92或更低。無論哪種方式在您的身體寬度帳戶的邊緣大小或設置邊距爲0，這應該解決問題。

來源

2011-06-08 20:39:14 Cfreak

這不是'margin'，它是'white-space'（或者至少它可能是'white-space' *以及*）... – 2011-06-08 20:44:31

我已經嘗試去除身體的邊緣，但是這對問題的症狀沒有影響。保證金在內容區域*之外，所以實際上它在這種特殊情況下不起任何作用。 – 2011-06-08 20:45:11

@羅伯特，看我的答案，和JS小提琴演示。這些建議適用於JS Fiddle，所以*可能*他們也會解決你的問題。 – 2011-06-08 20:47:46

奇數inline-block行爲的另一種可能性。在Chrome中，如果你有text-render: optimizeLegibility集合，我在Chrome內嵌塊元素中出現莫名的換行符，並發現刪除text-render: optimizeLegibility修復了這個問題。

我以前至少有one other難以計算出來的問題（網絡字體無法解釋的非呈現），原來是由optimizeLegibility引起的，所以從現在開始，這將是一個主要的嫌疑犯事情在Chrome中表現得很奇怪。

（nb。即使你不認爲你在使用它，但如果你使用的是像Twitter Bootstrap這樣的框架，你可能會在不知情的情況下使用它）

來源

2014-06-30 13:30:19

這是我在android平板電腦上遇到問題的原因 – DonutReply 2014-10-03 16:57:09

內嵌塊元素看起來沒有理由破解行嗎？

回答

相關問題