CSS 如何将

<

ul>的宽度限制为最宽项的宽度

在本文中，我们将介绍如何使用CSS将一个无序列表（

<

ul>）的宽度限制为其中最宽项的宽度。这在某些布局需求中非常有用，特别是当我们想要确保列表中的所有项目在同一水平上对齐时。

阅读更多：CSS 教程

使用display: inline-block

我们可以使用CSS属性display和inline-block来实现此目的。通过将

<

ul>的display属性设置为inline-block，它将自动收缩到其容器中最宽项目的宽度。

以下是一个示例：

<style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: inline-block;
    }

    li {
        display: inline-block;
        padding: 10px;
        border: 1px solid black;
    }
</style>

<ul>
    <li>Item 1</li>
    <li>Item 2 with longer text</li>
    <li>Item 3 with even longer text</li>
    <li>Item 4</li>
</ul>

在上面的示例中，

<

ul>元素的宽度将自动调整为具有最长文本的项目（”Item 3 with even longer text”）。其他项目将根据这个最长项目自动对齐，并且它们的宽度将不会超过最长项目的宽度。

使用display: table

另一种方法是使用CSS属性display和table。通过将

<

ul>的display属性设置为table，它将以表格的方式布局，可以限制为其中最宽项目的宽度。

下面是一个示例：

<style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: table;
        width: auto;
    }

    li {
        display: table-cell;
        padding: 10px;
        border: 1px solid black;
    }
</style>

<ul>
    <li>Item 1</li>
    <li>Item 2 with longer text</li>
    <li>Item 3 with even longer text</li>
    <li>Item 4</li>
</ul>

在上面的示例中，

<

ul>元素的宽度将根据最宽项目（”Item 3 with even longer text”）的宽度进行调整。其他项目将以单元格的形式排列，并自动对齐，其宽度不会超过最宽项目的宽度。

使用JavaScript动态计算宽度

如果你无法确定最宽项的宽度，或者需要在每次内容更改时自动更新列表宽度，可以使用JavaScript来动态计算并设置宽度。

以下是一个使用JavaScript的示例：

<script>
    window.addEventListener('load', function() {
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        var maxWidth = Array.from(lis).reduce(function(maxWidth, li) {
            return Math.max(maxWidth, li.offsetWidth);
        }, 0);
        ul.style.width = maxWidth + 'px';
    });
</script>

<style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    li {
        padding: 10px;
        border: 1px solid black;
    }
</style>

<ul>
    <li>Item 1</li>
    <li>Item 2 with longer text</li>
    <li>Item 3 with even longer text</li>
    <li>Item 4</li>
</ul>

在上面的示例中，JavaScript代码通过遍历所有