强制<li>的宽度与其内容相同</li>

Question

我有一个无序列表（UL），显然包含列表项（li）。

问题是， li 标记宽度与其父宽度相同。我没有为 ul 标记分配宽度，但我为 DIV 分配了一个宽度，其中包含 UL 。我指定的宽度为600px，因此，我的 li 标签现在为600宽，如果它只有2个字则无关紧要。

如何使li的宽度与内容相同？

谢谢！

Answer 1

默认div，ul＆amp; li都是display:block，意思是width:100%。为了使它们缩小到它们的内容，它们需要是内联块，在它们上面使用这个类来实现它。

.inline_block{
    display: inline-block;
    zoom: 1;
    *display: inline;
}

编辑：找到一种更好的方法。

li{
    float:left;
    clear:left;
    background-color:red;
}

http://jsfiddle.net/LhzWe/

Answer 2

你想这样吗？ demo

CSS

div{width: 600px; background-color: gray;}
ul{list-style: none; margin: 0; padding: 0;}
li{background-color: red; display: table-row;}

HTML

<div>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list three 3</li>
    </ul>
</div>

您也可以这样做demo

li{background-color: red; width: auto; display: table;}

我已经发现了另一种方法。见demo

ul{background-color: gray; list-style: none; margin: 0; padding: 0; }
li{background-color: red; display: inline-block; width:100%;}