菜单栏需要占据页面宽度的 100%答案

【问题标题】：Menu bar needs to occupy 100% of the page width菜单栏需要占据页面宽度的 100%
【发布时间】：2013-06-08 15:31:26
【问题描述】：

我在下面有这个菜单。我希望它占据页面宽度的 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>

【问题讨论】：

我想你可以找到它in this SO answer

标签： html css

【解决方案1】：

它完美地工作你在那里。唯一的问题是你必须给 UL 一个高度，所以它不会播放任何东西看看:

FIDDLE

【讨论】：

嗯，我所期望的是菜单的声音分布均匀
但是想象一下元素内的内容是不同的，例如“aa”和“aaaaaaaaaa”，在这种情况下我希望元素有不同的宽度..
然后你需要为每个li添加一个类并相应地设置它们的样式——给它们不同的宽度。
或者只使用溢出：隐藏；隐藏它并在展开时显示它。 :p
@ErikMes 我正在尝试您所说的“溢出：隐藏”，我将其添加为 li 的规则，但我看不到任何结果..jsfiddle.net/tirengarfio/C7wmM/2

【解决方案2】：

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

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

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

萨拉乔格

【讨论】：