自动将li的宽度调整为文本？答案

【问题标题】：Auto fit width of li to text?自动将li的宽度调整为文本？
【发布时间】：2010-11-23 10:32:28
【问题描述】：

是否有可能使用 CSS 将

标签的宽度自动调整到它包含的文本的宽度？

我正在设计一个使用自定义 CMS 的网站（我无权访问代码），所以就设计而言，我的选择有限。

可以在

标记上工作而无需直接编辑任何列表属性的 JavaScript 解决方案也可以工作。

【问题讨论】：

标签： javascript css

【解决方案1】：

在我的情况下，它是 float:right 为我修复它：

【讨论】：

【解决方案2】：

ul { display: inline }

将一次性解决您的所有问题。

【讨论】：

【解决方案3】：

将display: inline; CSS 添加到<ul> 块对我来说效果很好，没有不良影响。

【讨论】：

【解决方案4】：

编辑：不幸的是，以下解决方案在不同浏览器中的显示方式不同。

为了不让任何其他元素浮在列表旁边，我使用了这个：

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

唯一适合我的 CSS 解决方案。

【讨论】：

【解决方案5】：

<li> 是块级元素，因此默认为尽可能宽。

要将其“收缩包装”到内容的大小，请尝试浮动它：

li {
    float:left;
    clear:left;
}

这可能会满足您的需求。

如果您希望<li>s 并排坐在一起，您可以尝试：

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

或

li {
    display: inline
}

将其设为 inline 会取消其块级状态，因此它的行为类似于 <span> 或任何其他内联元素。

【讨论】：

对于li { display: inline }，请参阅我对已接受答案的评论。我的解决方案还使用了比所有那些浮动和清除更少的代码，并且如果您忘记将清除添加到列表下方的 next 项或没有无法更改代码的那部分，则可以避免出现问题。

【解决方案6】：

以前的答案对我来说都不是正确的，所以我使用了以下方法：

将样式“float:left”添加到我的
将

【讨论】：

【解决方案7】：

您可以使用 em 而不是像素来指定元素的宽度。一个 em 大致相当于默认字体中字母“m”的宽度。玩 li 中字符数的倍数，直到 em 宽度在视觉上吸引人。

【讨论】：

【解决方案8】：

正如@willoller 已经说过的，li 元素是块级元素，但除了浮动它之外，您还可以使用：

li {
    display: inline;
}

【讨论】：

注意内联在 IE 中的功能并不完整
这将导致所有列表项在同一行显示为文本。如果您希望列表保持格式为列表，并且每个列表项位于其自己的行中，请将display:inline 应用于<ul>，而不是：ul { display: inline }。这会将列表和列表项都缩小到最长列表项的宽度。

【解决方案9】：

如果有

标签的 id，您可以使用 JavaScript 来获取有多少个字符，然后将其乘以字体大小，然后将 li 宽度设置为该数字。

【讨论】：

【解决方案10】：

在符合标准的浏览器上，使用min-width 而不是width。在 IE 6 上，width 执行您所描述的操作。

【讨论】：