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/

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

2 个答案: