调整浏览器大小时如何使菜单换行？

Question

我一直在互联网上搜索，但我唯一得到的是如何在调整浏览器大小时避免/防止 div 元素环绕/浮动。我的问题恰恰相反：我有一个水平菜单，我试图在浏览器缩小时将元素（例如主页、联系人等）包裹起来，然后在浏览器最大化时返回其初始状态. 这是 HTML 文档：

<div id="menu">
<ul>
<li><a href="#index">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

CSS 是这样的：

     #menu
          {border:1px;
           height: 40px;
           width: 400px;
           clear: both;
           float: left;
           position:relative;
           top:20px;}
     #menu ul
           {list-style-type:none;
            margin:0;
            padding:0;
            overflow:hidden;}
     #menu li
           {float:left;}
     #menu a:link,a:visited
           {display:block;
            width:100px;
            font-weight:bold;
            text-align:center;}

我尝试将高度和宽度更改为自动，删除/移动清除、浮动、溢出和位置标记，我什至将“#menu li”中的 float:left 更改为 float:none，然后是菜单即使我调整浏览器的大小，元素也会一个接一个地固定下来。 我也用 div 划分了每个菜单元素（不在下面的代码中），但没有任何成功。 我是否必须完全更改 CSS 代码或使用 js、jquery 等来执行此操作？ 如果有，怎么做？

Answer 1

DEMO

这可以通过移除固定的高度宽度来实现。

未指定宽度的元素设置为width:auto，这通常是元素内容的大小。如果浮动元素不能相邻地放在页面上，它们将自动换行。

CSS

#menu{
    border:1px;
    clear: both;
    /*height: 40px; Remove*/
    /*width: 400px; Remove*/
    float: left;
    position:relative;
    top:20px;
    background:#58c;
}
#menu ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
#menu li{
    float:left;
}
#menu a:link,a:visited{
    display:block;
    width:100px;
    font-weight:bold;
    text-align:center;
}

Answer 2

您将 #menu 的宽度设置为 400 像素，这将固定该宽度，无论浏览器窗口有多宽。使用这个：

width:100%;
max-width:400px;