Question

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

似乎每个<li>都固有地拉伸了最大宽度的匹配。我怎么能避免这个？

<ul>是一个垂直列表，其内容在图片和文字之间有所不同。

Answer 1

内联块是好的，但可能你仍然希望列表项堆叠而不必重新设置它们。在这种情况下，您可以将内容放在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/

Answer 2

如果将<li>的“显示”样式设置为内联块，则它应该可以正常工作。

Answer 3

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

li {float: left;}

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

CSS - <ul>包含变量宽度<li> </li> </ul>

3 个答案: