Question

我在下面有这个菜单。我希望它占据页面宽度的100％并且元素均匀分布。怎么做？

<html>
    <head>
        <style type="text/css">
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                width: 100%;
            }
        li {
            float: left;
            }

        </style>
    </head>
    <body>
        <ul>
            <li>jkflasd</li>
            <li>jkflasd</li>
            <li>jkflasd</li>
            <li>jkflasd</li>
            <li>jkflasd</li>
            <li>jkflasd</li>
            <li>jkflasd</li>
        </ul>
    </body>
</html>

Answer 1

它完美地适用于你所拥有的。唯一的一点是你给UL一个高度所以它不会显示任何看起来:

FIDDLE

Answer 2

如果你知道你有多少李，你可以使用这个简单的css：

li {
    float: left;
    width: (100/number of li)%;
}

但这意味着，每次更换菜单栏时都必须更改它。

Sarajog

菜单栏需要占用页面宽度的100％

2 个答案: