行內塊元素不按預期方式顯示

我正在編寫樣式表，並且我想在容器內水平顯示三個元素（寬度= 33％），並使用相對佈局。下面的代碼：行內塊元素不按預期方式顯示

#container 
{ 
    margin:auto; 
    width:85%; 
    padding:0; 
} 
#element 
{ 
    display:inline-block; 
    width:33.3%; 
    margin-left:0; 
    margin-right:0; 
    border:0px; 
    text-align:center; 
    }

我不明白爲什麼有三個要素：

<div id="container"> 
<div id="element">hi</div> 
<div id="element">every</div> 
<div id="element">one</div> 
</div>

的最後一個元素顯示前兩以下，而我相信他們會在同一繪製線。沒有邊距，填充或邊框。如果寬度設置爲32％，則在全部瀏覽器窗口中，它們位於同一行上（工作原理），但是當我縮小瀏覽器窗口寬度時，最後一個元素將落在新行上。有誰知道爲什麼會發生這種情況？

來源

2011-05-02 Archimedis

在所有瀏覽器中？ – MeLight 2011-05-02 13:54:56

對於元素使用類名而不是id，文檔中id應該是唯一的。不會解決你的問題，只是說。 – 2011-05-02 13:55:36

@MeLight嗯我試過在FF 3.6和rekonq – Archimedis 2011-05-02 14:20:22

這些是內聯塊，所以它們就像字符一樣佈置（基本上認爲它們是真正的大字符）。在你的情況下，你在它們之間留有空白，這樣空白就變成了渲染中內聯塊之間的一行上的單個空格;你可以看到這個，如果你把邊界放在它們上面。所以三者共同佔用的空間最終爲「容器寬度的99.9％加上容器字體中兩個空間的寬度」。當你減少到32％時，一旦兩個空間加起來超過容器寬度的4％（這就是爲什麼它只發生在較小的容器寬度上），就會發生斷線。

如果你真的想讓你的內聯塊相互衝突，拿出它們之間的空間。

來源

2011-05-02 14:17:33

太棒了！我知道還有別的東西被渲染，但我看不到它！真的，真的很感謝你！ – Archimedis 2011-05-02 14:33:20

非常歡迎您！ – 2011-05-02 15:26:58

使你元素類（thanx Jarrett），並添加float:left樣式到該類。

.element 
{ 
    display:inline-block; 
    width:33.3%; 
    margin-left:0; 
    margin-right:0; 
    float:left; 
    border:0px; 
    text-align:center; 
    } 


<div id="container"> 
<div class="element">hi</div> 
<div class="element">every</div> 
<div class="element">one</div> 
</div>

來源

2011-05-02 13:59:31 MeLight

OMG，抱歉id/class錯誤（也許我需要睡xD）。無論如何，它的工作原理，謝謝！ =）你能解釋一下爲什麼沒有浮動屬性它不起作用？ – Archimedis 2011-05-02 14:08:42

如果你要浮動，使用「內聯塊」沒有意義，因爲浮動會強制顯示「阻止」......但更重要的是，你並沒有問這個問題，這是_why_內聯塊行爲就是這樣。 ;） – 2011-05-02 14:18:23

小心漂浮。如果你的容器不是浮動的，你的元素類將會出現在容器框中。如果你在它們周圍放置邊框，你會看到容器的高度沒有擴展到與類元素相匹配。漂浮是討厭的，應謹慎使用嵌套。 – robx 2011-05-02 17:56:27

我建議玩容器寬度的圓形。爲我工作的提示是給他們一條線。以下是我的貢獻：

http://jsfiddle.net/8dWhF/

來源

2011-05-02 14:17:47 gutierrezalex

行內塊元素不按預期方式顯示

回答

相關問題