Question

我真的很难让水平导航栏居中。我尝试过混合显示：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;
}

Answer 1

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

删除float：left

http://jsfiddle.net/Ar3BV/

Answer 2

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

Answer 3

从float: left移除.navlist ul，检查此Fiddle。

Answer 4

使用以下css。 Demo

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

Answer 5

从

中删除float:left

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

并添加

.navcontainer{
float: center;
}

它会起作用

Answer 6

将您的CSS更新为

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

检查here

使用css的中心导航栏

6 个答案: