css - css根据元素调整宽度

Question

我正在开发一个导航菜单

如果你看到图像，右边还有一些空间，我怎样才能自动调整那里的空间。

元素的数量不固定..它们可以是 2,3 ,4 或其他东西

[目前有4个]

Answer 1

实现这一点的最佳方法是通过display: table在您的ul;上使用让您的水平导航栏表现为表格。并display: table-cell在您的li.

如果您发布一些代码，我将能够给您一些更好的说明；但这里有一个例子：

    nav { 
        width: 500px; /* This would be set to the width of the existing container */
    }

    nav ul {
        list-style: none;
        margin:0;
        padding:0;
        display: table;
        width: 100%; 
    }

    nav li {
        text-align: center;
        display: table-cell;
    }
    nav a {
        display: block;
        text-align: center;
    }