如何让<li>根据其内容自动调整大小？

Question

我想知道如何根据文本内容动态调整这些<li>的宽度，以便它不会跨越整个网页？我使用with: auto;，但这不起作用。

li {
    list-style: none;
    background: #4FBAF7;
    width: auto;
}

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth 5th</li>
    <li>Sixth 6th</li>
    <li>Seventh</li>
</ul>

Answer 1

我能想到的最简单的方法是设置li {display:table;} - ＆＃34;收缩适合＆＃34;宽度。

＆＃13;

＆＃13;

li {
    background: #4FBAF7;
    display: table;
}

＆＃13;

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth 5th</li>
    <li>Sixth 6th</li>
    <li>Seventh</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

您还可以使用float + clear方法（在下面的评论中提出）。

＆＃13;

＆＃13;

ul {
    list-style: none;
    overflow: auto;
}
li {
    background: #4FBAF7;
    float: left;
    clear: left;
}

＆＃13;

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth 5th</li>
    <li>Sixth 6th</li>
    <li>Seventh</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你要找的吗？

li {
       list-style: none;
       background: #4FBAF7;
        width:intrinsic;

}