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

Question

我一直在网上搜索，但我唯一得到的是如何在调整浏览器大小时 avoid/prevent wrapping/floating 上的 div 元素。我的问题恰恰相反：我有一个水平菜单，我试图在浏览器缩小后将元素（例如主页、联系人等）包装起来，然后 return 到其初始状态浏览器最大化。这是 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;}

我尝试将高度和宽度更改为自动，remove/shift clear、float、overflow 和 position 标签，我什至将“#menu li”中的 float:left 更改为 float:none，但是菜单元素一个接一个地固定下来，即使我调整浏览器的大小，它也会保持这种状态。我也 divided 每个菜单元素 div （不在下面的代码中），但没有任何成功。我是否必须完全更改 CSS 代码或使用 js、jquery 等来执行此操作？如果可以，怎么做？

Answer 1

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

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

Answer 2

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;
}

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

How can I make the menu to wrap when I resize my browser?

html

css

menu

word-wrap

floating

DEMO