jquery - 强迫的宽度与其内容相同

Question

我得到了一个无序列表（UL），它显然包含列表项（li）。

问题在于，li标签宽度与其父宽度相同。我没有为ul标签分配宽度，但我已经为包含UL的DIV分配了宽度。我分配的宽度是 600px，因此，我的li标签现在是 600width，如果它只有 2 个单词也没关系。

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

谢谢！

Answer 1

默认情况下div，ul&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

你想要这样吗？演示

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>

你也可以做这个演示

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

我还发现了另一种方法。看这个演示

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