如何使塊元素適應其內部的大小？

如果我有這樣的HTML：如何使塊元素適應其內部的大小？

<li class="name">hi</li> 
<li class="name">hello</li> 
<li class="name">wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</li>

而這個CSS：

li.name{ 
    border: 1px solid #A38870; 
    background-color: #FA682D; 
    list-style: none; 
    margin: 15px; 
    padding: 5px; 
}

背景一路延伸遇到像this頁面。

如何讓背景調整爲像this這樣的文字大小（沒有明確設定每個列表元素的寬度）？

來源

2011-04-27 pennydrops

@Arthur Halma是的，謝謝。我在等着看有沒有人會發表評論，以幫助我理解你的解決方案還是Usman Ali的更好。 – pennydrops 2011-04-27 14:51:38

display: table;

在li.name CSS類添加此CSS代碼。

來源

2011-04-27 11:14:26

-2

給它display: inline-block

li.name{ 
    border: 1px solid #A38870; 
    background-color: #FA682D; 
    list-style: none; 
    margin: 15px; 
    padding: 5px; 

    display: inline-block; 

}

來源

2011-04-27 11:09:27 Bazzz

這不起作用。 OP需要列表顯示一個在另一個之下 – JohnP 2011-04-27 11:11:52

更正，在這裏工作的小提琴：http://jsfiddle.net/ezmilhouse/3jRx7/1/

li.name{ 
    border: 1px solid #A38870; 
    background-color: #FA682D; 
    display:inline; 
    list-style: none; 
    line-height:36px; 
    padding:4px; 
} 

li.name:after { 
    content:"\A"; 
    white-space:pre; 
}

來源

2011-04-27 11:10:03 ezmilhouse

這不起作用。 OP需要通過添加上面的屬性來顯示一個在另一個下面的列表 – JohnP 2011-04-27 11:12:17

所有的li元素將以單行顯示（對於這個示例） – Anji 2011-04-27 11:12:44

li.name{ 
    /* your suff */ 
    float: left; 
    clear: both; 
}

這所以當你漂浮塊元素，他們適應大小的內容，問題是他們漂浮離開，所以他們會是彼此相鄰，以避免這種情況，你可以clear: left或clear: both。

來源

2011-04-27 11:15:24 meo

嘗試使用clear:both; float: left屬性。

來源

2011-04-27 11:23:43 Anji

有幾種解決方案，沒有一個是非常完美的;你想要哪一個取決於你的用例。

使用display: table。這將適用於新的瀏覽器，但不適用於較舊的IE版本。如上所述，使用float: left; clear: both。只要周圍沒有其他浮游物，這種情況就會發揮作用，否則就會大打折扣。
使用瀏覽器特定的CSS（例如，Gecko支持width: -moz-fit-content）。這有明顯的缺點。

對於你的情況，今天，display: table可能效果最好，但展望未來，我們可以希望爲width的fit-content值被標準化。

來源

2011-04-27 18:05:48

如何使塊元素適應其內部的大小？

回答

相關問題