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

Question

如果我有這個 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;
}

背景像這樣一直延伸到整個頁面。

如何使背景像這樣調整到文本的大小（無需明確設置每個列表元素的寬度）？

Answer 1

 display: table;

在li.name css class 中添加此 css 代碼。

Answer 2

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

因此，當您浮動塊元素時，它們會適應大小的內容，問題是它們向左浮動，因此它們將彼此相鄰，為避免這種情況，您可以clear: left或clear: both 。

Answer 3

有幾種解決方案，沒有一個是真正完美的； 您想要哪一個取決於您的用例。

1. 使用display: table 。 這將適用於足夠新的瀏覽器，但不適用於較舊的 IE 版本。

2. 使用float: left; clear: both float: left; clear: both如上所述。 只要周圍沒有其他浮動，這將起作用，否則會嚴重損壞。

3. 使用特定於瀏覽器的 CSS（例如 Gecko 支持width: -moz-fit-content ）。 這有明顯的缺點。

對於您的情況和今天， display: table可能效果最好，但展望未來，我們可以希望width的fit-content值得到標准化。

Answer 4

我認為最好的方法是使用特定於瀏覽器的 CSS，為每個瀏覽器寫一行，就像 Justin Geeslin 在這里解釋的那樣：

“寬度：-moz-fit-content;”是否有 css 跨瀏覽器值？

p{
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

Answer 5

更正，在這里工作小提琴： 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;
}

Answer 6

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

Answer 7

給它display: inline-block

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

    display: inline-block;

}