Question

我有一个<ul>，其中有一些<li>。我希望li的宽度根据文字的值增加？

示例代码：

<ul class="navTopstories">
    <li>Onsafsf sdsfsfs fsdsdfsdf</li>
    <li>two</li>
    <li>Three</li>      
</ul>

css：

.navTopstories li,.navWorld li{
    width: 80px;
    background-color: #333;
    color: white;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid white;
}

Answer 1

默认情况下，LI是一个块元素，这意味着它将占用尽可能宽的宽度。指定width属性会将框模型限制为仅80px。要使框仅与您需要将LI更改为内联元素所需的内容一样宽：

.navTopstories li,.navWorld li{
    width: 80px;

到

.navTopstories li,.navWorld li{
    display: inline;

这将使LI灵活且适合内容，但是它也会使LI相互碰撞，因为浏览器现在认为它们是句子中的单词。为了解决这个问题，我们在混合中添加了另一个元素after伪元素：

.navTopstories li:after, .navWorld li:after {
    content: " ";
    display: block;
    height:1em;
}

这会在LI元素之后创建一个新的块元素，该元素占用尽可能宽的宽度（100％），这会将其两侧的LI分成两行。您需要content:" "才能使伪元素生效，并且我已添加height以在LI之间显示一些空格，以便您可以看到它们是分开的。

这是一个JSFiddle：）

http://jsfiddle.net/7LtQN/2/

快乐编码：）

Answer 2

删除：

width: 80px;

和/或在ul / li上设置：

width: auto;

根据文本值动态增加li的宽度

2 个答案: