Question

在这里，我遗漏了一些基本的东西。

的 HTML

Unordered List:
<ul>
    <li>Apple</li>
    <li>Ball</li>
    <li>Cat</li>
</ul>

CSS

ul li{
    background-color:#fcf;
    margin:5px;
    list-style:none;
}

Fiddle Link

我希望 li 的宽度符合内容，但宽度为100％（可能）。
救救我!!
提前致谢

Answer 1

您可以浮动并清除列表项，例如：

ul li{
    background-color:#fcf;
    margin:5px;
    list-style:none;
    float:left;
    clear:left;
}

<强> jsFiddle example

或者在一个范围中包装列表项无序列表：

<ul>
    <li><span>Apple</span>
    </li>
    <li><span>Ball</span>
    </li>
    <li><span>Cat</span>
    </li>
</ul>
ul li {
    list-style:none;
}
ul li span {
    background-color:#fcf;
    margin:5px;
}

<强> jsFiddle example

Answer 2

尝试这样的事情。它完成了你想要的东西，但我无法想象这一切都是实用的。

<强> CSS

ul li {
    background-color:#fcf;
    margin:5px;
    list-style:none;
    display:inline;
    float:left;
    clear:both
}

http://jsfiddle.net/ytL0rweo/

Answer 3

使用：float或display：inline-block

ul li{
    background-color:#fcf;
    margin:5px;
    list-style:none;
    float:left;
}

OR

ul li{
        background-color:#fcf;
        margin:5px;
        list-style:none;
        display:inline-block;
}

根据内容保持li宽度

3 个答案: