在宽度变化时重新定位 DIV 菜单项答案

【问题标题】：re-position DIV menu items on width change在宽度变化时重新定位 DIV 菜单项
【发布时间】：2013-06-12 21:55:29
【问题描述】：

假设我的网页顶部有一个菜单栏。

每个菜单项都在其自己的 DIV 中，并且这些菜单项水平布局，每个菜单项 DIV 并排。

现在，当您缩小浏览器的宽度时，浏览器的宽度会小于此菜单栏的宽度。

我想做的是在发生这种情况时让最后一个菜单项 (DIV) 向下移动到下一行，并且每个连续的最后一个菜单项都与浏览器的宽度继续缩小相同，直到所有的菜单项最终从上到下堆叠。

我不确定如何使用 CSS 来做到这一点。

有什么建议吗？

谢谢。

【问题讨论】：

到目前为止你有什么？
菜单项是否需要填满菜单的整个宽度？还是它们是静态宽度？您可以只浮动菜单 div 中留下的菜单项。
我目前拥有的是 UL 菜单项列表。菜单项不需要填满整个宽度。只有 5 个项目，最好推到窗口的右侧（因为徽标会在左侧）。但是随着浏览器宽度的缩小，菜单的末端需要往下拉，直到窄到全部垂直为止。

标签： css html menu width positioning

【解决方案1】：

html:

<div id="container">
        <ul>
            <li>
                Menu1
            </li>
            <li>
                Menu2
            </li>
            <li>
                Menu3
            </li>
            <li>
                Menu4
            </li>
            <li>
                Menu5
            </li>        
        </ul>
    </div>

css:

#container{
    width:100%;
    min-width:200px;
    background-color:green;
}

#container ul li{
    width:50px;
    height:22px;
    background-color:red;
    border:1px solid black;
    list-style:none;
    text-align:center;
    display:inline-block;
}

演示：

http://jsfiddle.net/jU44m/

【讨论】：

感谢 PGR - 一旦我将最小宽度从 200 更改为 100，它就像一个魅力！非常感谢。

【解决方案2】：

要做到这一点，所有的菜单项都应该在一个更大的 div 中，并且要在页面调整大小时使这个 div 调整大小，请将其宽度值设置为百分比。将此 div 的高度值设置为 auto 以便在项目掉落时它会扩展（可以使用填充来调整大小），如下所示：

#menu {
    width: 50%;
    height: auto;
}

【讨论】：