Question

我一直在尝试使用悬停下拉菜单创建水平导航栏。我已经让它工作但是为了使所有元素并排（水平），它们必须浮动：左应用于它们。有没有办法让他们居中？

另外，我的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;而不是float: left;来完成可以水平居中的块（ish）级元素。

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

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

Answer 2

使用以下代码

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

#navbar ul li {
    display:inline-block;

}

Answer 3

#navbar ul li ul li {
visibility: hidden;
text-align: center;
right: 0;
display: block;
width: 100%;
}

Answer 4

为了与众不同，我觉得这很有效，避免了使用内联块创建的一些不确定性：

#navbar ul {
    display: table;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

#navbar ul li {
    float: left;
}

水平居中一个<ul>导航栏，其中包含浮动的li元素</ul>

4 个答案: