Javascript 自动调整li到文本的宽度？

是否可以使用CSS将

标记的宽度自动调整为它包含的文本的宽度

我正在设计一个使用定制CMS的网站（我没有访问代码的权限），所以我在设计上的选择是有限的

---

可以在

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

是块级元素，因此默认为尽可能宽

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

li {
    float:left;
    clear:left;
}

这可能会满足你的需求

如果您想让

坐在一起，您可以尝试：

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

---

使其

内联

将取消其块级状态，因此其行为类似于

或任何其他内联元素。

在符合标准的浏览器上，使用

最小宽度

而不是

宽度

。在IE 6上，

width

做你所描述的。

如果你有

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

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

li {
    display: inline;
}

---

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

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

将样式“float:left”添加到my

• 将
  包围在另一个

  ---

  编辑：不幸的是，以下解决方案在不同的浏览器中显示不同
  为了不让任何其他元素漂浮在列表之外，我使用了以下方法：

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

  ---

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

  显示：内联CSS到
  块对我来说非常有效，没有任何不想要的效果
  
  ul { display: inline }
  
  将立即解决您的所有问题。
  在我的情况下，是float:right为我解决了问题：
  
  
  请注意，内联在IET中功能不全，这将导致所有列表项显示为同一行的文本。如果希望列表保持为列表格式，且每个列表项位于其自己的行上，请将
  display:inline
  应用于
  ：
  ul{display:inline}
  。这将把列表和列表项缩小到最长列表项的宽度。有关
  li{display:inline}
  的信息，请参阅我对已接受答案的评论。我的解决方案使用的代码也比所有这些浮动和清除的代码都少，并且避免了在忘记将清除添加到列表下的下一项或无法更改该部分代码时出现问题。
  ul { display: inline }