1

我有一个必须为 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，而导航 ul id 无济于事，然后我尝试将列表包装在 div 中，并使用一个将内容对齐在中心的类，但这也不起作用。然后我尝试了 text-align 无济于事。我不知道该怎么做所以任何帮助将不胜感激！

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

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

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

4

2 回答 2

2

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

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

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

您只需要修改选择器以仅将列表项定位为 first 的子项<ul>：

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

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

于 2013-06-04T18:36:17.497 回答
0

我认为如果你让nav { width: auto; margin: auto; } 我通常在 Chrome 调试器中为这样的问题鬼混，它应该可以工作。

于 2013-06-04T18:37:06.420 回答