CSS嵌套跨度和寬度屬性

我有一個關於嵌套跨度的問題以及CSS如何應用寬度屬性。 HTML是這樣的，'寬'類設置寬度。盒子類給它一個邊界。僅當寬度較大並且拼接在一起時纔會應用寬度。有人可以向我解釋爲什麼會出現這種情況嗎？我是CSS業餘愛好者，也許這是我錯過的一些基本規則。CSS嵌套跨度和寬度屬性

<span class="wide"><span class="box">Not wide</span></span> 
<span class="wide box"><span>Wide</span></span> 
<span><span class="wide box">Wide</span></span> 
<span class="box"><span class="wide">Not wide</span></span>

這裏你可以看到效果： http://jsfiddle.net/7hXUu/2/

感謝任何見解，亞倫

來源

2012-08-14 Aaron Newman

[一個可能的答案]（http://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span） – Vidul 2012-08-14 08:09:16

-1

的box類有float: left，把元素浮動元素，因爲對面的默認爲span，一個內聯元素。 width屬性不適用於內聯元素。

另一種製作width適用於span元素的方法是在其上設置display: inline-block。

來源

2012-08-14 08:08:24

原因是使用float:left;。但我不知道這究竟是什麼。

您可以通過使用display:block;或display:inline-block;

來源

2012-08-14 08:08:45

你們快，謝謝！添加顯示：塊;以廣泛的類修復最後一種情況，添加'寬度：繼承'框類修復第一種情況。 – 2012-08-14 08:18:28

Widths cannot be applied to inline elements，然而呈現行爲申請像span, a元件的寬度是對於f loated inline elements不同：

如果'width'被計算爲'auto'，所使用的值是「收縮到適合」寬度...然後縮小到適合的寬度是： min(max(preferred minimum width, available width), preferred width)

這不是全部。您的浮動集裝箱跨越每個建立新的block formatting contexts，影響floated element positioning的計算結果。如果有足夠的請求，我可能會一步步地繼續，但這絕對是不切實際的情況。

底線是：這是一個很好的意大利麪條代碼，但是對於現實生活中的使用來說很糟糕。

來源

2012-08-14 10:30:26

CSS嵌套跨度和寬度屬性

回答

相關問題