自动适合li到文本的宽度？

Question

无论如何都可以自动调整＆lt; li＆gt;的宽度。使用CSS标记它包含的文本的宽度？

我正在设计一个使用自定义CMS的网站（我无法访问代码），因此就设计而言，我的选项有限。

适用于＆lt; li＆gt;的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;
}

OR

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

之前的答案都不适合我，所以我使用了以下方法：

1. 将样式“float：left”添加到我的＆lt; ul＆gt;
2. 环绕＆lt; ul＆gt;在另一个＆lt; div＆gt;

Answer 6

将display: inline; CSS添加到<ul>块对我来说非常有用，没有任何不良影响。

Answer 7

ul { display: inline }

将立即解决您的所有问题。

Answer 8

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

Answer 9

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

Answer 10

对于我来说，它是float：right，它为我修复了此问题：