自動適合li到文本的寬度？

Question

有沒有可能使用CSS自動將<li>標簽的寬度調整到它包含的文本的寬度？

我正在設計一個使用自定義CMS的網站（我無法訪問代碼），因此就設計而言，我的選項有限。

無需直接編輯任何列表屬性即可在<li>標簽上運行的Javascript解決方案也可以。

Answer 1

<li>是塊級元素，因此默認為盡可能寬。

要使其“收縮”到內容的大小，請嘗試浮動它：

li {
    float:left;
    clear:left;
}

這可能會做你想要的。

如果你想讓<li>坐在一起，你可以嘗試：

ul {
    clear: left;  /* I like to put the clear on the <ul> */
}
li {
    float: left;
}

要么

li {
    display: inline
}

使其inline聯會消除其塊級狀態，因此它的行為類似於<span>或任何其他內聯元素。

Answer 2

正如@willoller已經說過的那樣， li元素是一個塊級元素，但除了浮動它之外，你還可以使用：

li {
    display: inline;
}

Answer 3

編輯：不幸的是，以下解決方案在不同的瀏覽器中顯示不同。

為了不讓任何其他元素浮動在列表中，我使用了這個：

ul {
    white-space: pre-line;
    margin: -25px 0 0;   /* to compensate the pre-line down-shift */ 
}
ul li {
    display: inline-block;
}

唯一適用於我的CSS解決方案。

Answer 4

在符合標准的瀏覽器上，使用min-width而不是width 。 在IE 6上， width符合您的描述。

Answer 5

添加display: inline; <ul>塊的CSS對我來說非常有用，沒有任何不良影響。

Answer 6

ul { display: inline }

將立即解決您的所有問題。

Answer 7

以前的答案都沒有對我有效，所以我使用了以下方法：

1. 將樣式“float：left”添加到我的<ul>
2. 在另一個<div>中包圍<ul>

Answer 8

如果擁有<li>標簽的id，您可以使用JavaScript獲取有多少個字符，然后將其乘以字體大小，然后將li寬度設置為該數字。

Answer 9

您可以使用em而不是像素來指定元素的寬度。 em大致相當於默認字體中字母“m”的寬度。 玩你的li中的字符數的倍數，直到你有一個看似吸引人的em寬度。

Answer 10

在我的情況下，它是浮動的：正確的，它為我修復：