css - 水平居中包含 float li 元素的 <ul> 导航栏

Question

我一直在尝试制作带有悬停下拉菜单的水平导航栏。我已经让它工作了，但是为了让 中的所有元素并排(水平)，它们必须应用 float:left。有什么方法可以让它们居中吗？

此外，我的 CSS 编码风格...正确吗？我觉得我做错了。 谢谢!

HTML:

<div id="navbar" class="titlereg">
    <ul>
        <li><a href="#">Reviews</a>
                <ul>
                    <li><a href="#">DnB</a></li>
                </ul>
            </li>

            <li><a href="#">Opinions</a></li>
            <li><a href="#">About</a></li>
        </ul>
</div>

CSS:

#navbar {
    width:500px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

#navbar ul {
    list-style:none;
    padding:0;
}

#navbar ul li {
    float:left;
}

#navbar ul li a {
    text-decoration:none;
    font-size: 1.5em;
    padding-right:5px;
    color:rgba(255,0,180,0.5);
}

#navbar ul li a:hover {
    color:rgba(0,168,255,0.5);
}

#navbar ul li ul li {
    visibility:hidden;
}

#navbar ul li:hover > ul li{
    visibility:visible;
}

Answer 1

您可以使用 display: inline-block; 实现水平居中的 block 级元素。而不是使用 float: left; .

如果您绝对将子菜单定位到其相对父级，则可以更轻松地定位它。

http://jsfiddle.net/C5Xdp/1/

#navbar {
    width:500px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}

#navbar ul {
    list-style:none;
    padding:0;
    display: inline;
}

#navbar ul li { position: relative;
    display: inline;
}

#navbar ul li a {
    display: inline-block;
    text-decoration:none;
    font-size: 1.5em;
    padding-right:5px;
    color:rgba(255,0,180,0.5);
}

#navbar ul li a:hover {
    color:rgba(0,168,255,0.5);
}

#navbar ul li ul { position: absolute;
    left: 0;
    top: 1em; }

#navbar ul li ul li {
    visibility:hidden;
}

#navbar ul li:hover > ul li{
    visibility:visible;
}