Question

我有一个宽度为900像素的导航栏，但里面的链接不会总是跨越条的整个宽度，所以我想把链接居中。问题是无论我尝试什么，链接都不会居中。这是我的CSS：

.center {
    text-align: center;
}
nav {
    width: 900px;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    margin: 0 auto 20px auto;
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    background: #C0C0C0;
}
nav ul:after {
    content:" \2022 ";
    clear: both;
    display: block;
}
nav ul:last-child:after {
    content:"";
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    text-align: center;
    display: block;
    padding: 20px 15px;
    text-decoration: none;
}
nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}

我尝试将自动边距添加到导航ID，并且nav ul id无效，然后我尝试将该列表包装在一个div中，该类与中心内容对齐，但这也不起作用。然后我尝试text-align无济于事。我不知道该怎么办，所以非常感谢任何帮助！

这是我一直在使用的JDFiddle：http://jsfiddle.net/VCKMU/2/

更新：在收到@Adrifts建议并将列表项从float:left更改为inline-block后，它们现在在中心对齐，但现在所有子项都是内联块而不是垂直列表。有什么想法吗？

更新了JSFiddle：http://jsfiddle.net/VCKMU/6/

Answer 1

而不是浮动列表项，只需将其显示值更改为inline-block;，因为您已在其包含块上指定了text-align: center;。

http://jsfiddle.net/VCKMU/6/

唯一的问题是，这会导致子项目在应该是垂直的时候变成内联列表。

您只需要修改选择器以仅定位列表 - 项目是第一个<ul>的子项：

.center > ul > li {
display: inline-block;
}

http://jsfiddle.net/VCKMU/8/

Answer 2

我认为如果你给nav { width: auto; margin: auto; }它应该有效我经常在Chrome调试器中愚弄这样的问题。

无法居中我的导航

2 个答案: