1

是否可以<li>根据同一内容中的内容调整其宽度<ul>？

似乎每一个<li>都是天生就拉伸了匹配的最大宽度。我怎样才能避免这种情况？

这<ul>是一个垂直列表，内容在图片和文本之间变化。

4

3 回答 3

3

inline-block 很好，但大概您仍然希望列表项堆叠而不必重新设置它们的样式。在这种情况下，您可以将内容放在 span 或 div 中，并将其设置为内联样式。

<html>
<body>
    <ul>
        <li><span>test</span></li>
        <li><span>long test</span></li>
        <li><span>longest test</span></li>
    </ul>
</body>
</html>​

有了这个 CSS

li span
{

    background-color:blue;
    display:inline-block;

}​

http://jsfiddle.net/WHSpW/

于 2012-08-31T16:38:31.350 回答
2

如果您将“显示”样式设置<li>为 inline-block 它应该可以按您的意愿工作。

于 2012-08-31T16:35:26.810 回答
0

如果您浮动它们，它们将采用它们包含的内容的宽度。

li {float: left;}

您需要浮动包含ul或应用clearfix以防止其崩溃。在 IE6 下，您可以使用 zoom:1 来触发ul.

于 2012-08-31T16:42:01.473 回答