Question

有没有办法在不使用JavaScript的情况下执行此操作？如果问题不清楚......我有一个无序列表，其中包含几个列表项，其内容宽度都不同。我希望将所有宽度设置为列表项的最长内容宽度。

Answer 1

使用

 display: block;
 width: 100%;

在你的CSS课程中。

Answer 2

您可以将列表显示设置为inline-block或table，使其适合其内容，而不是作为一个块：

ul {
    display: inline-block;
}

<强> Demo fiddle

Answer 3

试试这个html，

<ul>
    <li>
        This is sample text.
    </li>
    <li>
        This is sample text.
    </li>
    <li>
        This is sample text.
    </li>
    <li>
        This is sample text with longest content in unordred list.
    </li>
</ul>

使用CSS，

ul {
    display: inline-block;
}

li{
    border:1px solid orange;
    list-style:none;
    margin-bottom:5px;
    padding:10px;
}

<强> Demo

Answer 4

li
{
    background:Red;
}
ul
{
    display:inline-block;
}

这是fiddle

无序列表中所有列表项的宽度相同，设置为最长内容的宽度

4 个答案: