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

1 行に 1 行足りない場合、次の行に移動するにはどうすればよいですか? 現在、私はメディアクエリを書いていますが、標準サイズでは問題なく動作します。ブラウザのサイズを変更したときに機能するようにします。

4

1 に答える 1

1

You can do something like this:

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

Changes are:

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;
}
于 2012-08-15T00:13:04.490 に答える