DEMO

Question

我一直在互联网上搜索，但我唯一得到的是如何在调整浏览器大小时避免/阻止包装/浮动的div元素。我的问题正好相反：我有一个水平菜单，我试图在浏览器缩小时包裹元素（例如Home，Contact等），然后在浏览器最大化时返回其初始状态。这是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;}

我试图将高度和宽度更改为自动，移除/移动clear，float，overflow和position标签，我甚至更改了浮动：左边的“#menu li”，浮动：无，但然后菜单即使我调整浏览器大小，元素也会一个接一个地得到修复并保持这种状态。我也用div分隔每个菜单元素（不在下面的代码中），但没有任何成功。我是否必须完全更改CSS代码或使用js，jquery等进行此操作？如果是这样，怎么样？

Answer 1

无论浏览器窗口有多宽，您都将#menu的宽度设置为400px，以修复该宽度。使用这个：

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

当我调整浏览器大小时，如何让菜单换行？

2 个答案:

DEMO