-1

水平ナビゲーションバーを中央に配置するのに本当に苦労しています。display:inline-block; の混合を試しました。コードは役に立ちませんでしたが、私が別の方法で試す方法を知っている人はいますか。

HTML コード

<div class="container">
    <div id="navcontainer" class="navlist" style="background: #99ccff;"> 
        <ul id="navlist">
            <li><a id="link1"  onmouseover="chbg('#99ccff')" onMouseOut="chbg('#99ccff')" href="#">Products</a></li>
            <li><a id="link2" onmouseover="chbg('#ff9999')" onMouseOut="chbg('#99ccff')"  href="#">Holidays / Travel</a></li>
            <li><a id="link3" onmouseover="chbg('#ffff99')" onMouseOut="chbg('#99ccff')"  href="#">Motors / Transport</a></li>
            <li><a id="link4" onmouseover="chbg('#99cc66')" onMouseOut="chbg('#99ccff')"  href="#">Services</a></li>
        </ul>
        <br style="clear:right"/>
    </div>
</div>

CSSコード

.navlist {
    width: 100%;
    background-color: #333; 
    padding-top: 90px; 
    text-align:center;
}

.navlist ul {
    margin: 0; padding: 0;
    float: left;
}

.navlist ul li {
    display:inline;
}

.navlist ul li a {
    text-decoration: none;
    color: white; 
    padding: 0px 20px;
    display:inline-block;
}

.navlist ul li a:visited {
    color: #333;
}

.navlist ul li a:hover, .menu ul li .current {
    color: #333;
}
4

6 に答える 6

1 
.navlist ul {
    margin: 0;
    padding: 0;
    /*float: left;*/
}

フロートを削除:左

http://jsfiddle.net/Ar3BV/

于 2013-09-09T08:35:21.980 に答える
0

float:leftから削除

.navlist ul {
    margin: 0; padding: 0;
    float: left;
}

そして追加

.navcontainer{
float: center;
}

それが動作します

于 2013-09-09T08:43:22.267 に答える
0

次の css を使用します。デモ

.navlist{
    width: 100%;
    background-color: #333333; 
    padding-top: 90px; 
    text-align:center;
    margin-left: auto ;
    margin-right: auto ;
}

.navlist ul
{
    margin: 0; padding: 0;
}


.navlist ul li{
    display:inline;
}

.navlist ul li a{
    text-decoration: none;
    color: white; 
    padding: 0px 20px;
}
于 2013-09-09T08:41:52.907 に答える
0

margin-left と margin-right を auto に設定してみてください。

于 2013-09-09T08:34:25.430 に答える
0

CSSを次のように更新します

  .navlist ul {
        margin: 0 auto; 
        padding: 0;
    }

ここをチェック

于 2013-09-09T08:53:43.630 に答える
0

float: leftからを削除し.navlist ul、このFiddleを確認してください。

于 2013-09-09T08:37:09.700 に答える