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

Question

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

每个菜单项都在自己的 DIV 中，并且水平放置，每个菜单项 DIV 并排放置。

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

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

我不确定如何使用 CSS 执行此操作。

有什么建议吗？

谢谢。

Answer 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/