html - 有人可以帮我把它做成一个响应更快的菜单吗？

Question

 <nav class="top">
            <div class="wrap">
                <ul>
                    <li><img alt="" src="img/n1.png" /> Dashboard </li>
                    <li><img alt="" src="img/n2.png" /> Statistics</li>
                    <li><img alt="" src="img/n3.png" /> Tools</li>
                    <li><img alt="" src="img/n4.png" /> Settings</li>
                    <li><img alt="" src="img/n5.png" /> Subaccounts</li>
                    <li><img alt="" src="img/n6.png" /> Support</li>
                </ul>
            </div>
        </nav>
nav.top{
    background: #005293;
    min-height: 44px;
    width: 100%;
    clear: both;
    color: white;
    left: 0%;
    position: absolute;
    font-family:Verdana;
}
nav.top .wrap{
    width:1075px;
    margin:0 auto;
}
nav.top img{
    vertical-align: text-top;
    padding-right: 8px;
}
nav.top li{
    line-height: 43px;
    padding: 0px 32px;
    border-left: 1px solid white;
    font-size:11pt;
}

当一行没有足够的空间时，如何使它转到下一行？目前我编写媒体查询，它适用于标准尺寸。我希望它在我重新调整浏览器大小时工作。

Answer 1

你可以这样做：

http://jsfiddle.net/wTvE7/3/

变化是：

nav.top{
    /* removed width */
    background: #005293;
    min-height: 44px;
    clear: both;
    color: white;
    left: 0%;
    position: absolute;
    font-family:Verdana;
}
nav.top .wrap{
    width:100%; /*changed width to 100%*/
    margin:0 auto;
    position:relative;
}
nav.top img{
    vertical-align: text-top;
    padding-right: 8px;
}
nav.top li{
    line-height: 43px;
    padding: 0px 32px;
    border-left: 1px solid white;
    font-size:11pt;
    float:left;
}