-1

我真的很难让我的水平导航栏居中。我试过混合显示：内联块；代码但无济于事，有谁知道我可以如何尝试不同的事情。

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: leftfrom .navlist ul，检查这个Fiddle。

于 2013-09-09T08:37:09.700 回答
0

从float:left_

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

并添加

.navcontainer{
float: center;
}

它会工作

于 2013-09-09T08:43:22.267 回答
0

您应该尝试将 margin-left 和 margin-right 设置为自动。

于 2013-09-09T08:34:25.430 回答
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

将您的 CSS 更新为

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

在这里检查

于 2013-09-09T08:53:43.630 回答