css - 在宽度变化时重新定位 DIV 菜单项

Question

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

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

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

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

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

有什么建议么？

谢谢。

Answer 1

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

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

Answer 2

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/