當我調整瀏覽器大小時，如何讓菜單換行？

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