无法居中我的导航

Posted 2023-03-06

【中文标题】无法居中我的导航

【英文标题】：Can't Center My Navigation

【发布时间】：2013-05-31 06:35:12

【问题描述】：

我有一个必须为 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/

【参考方案1】：

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

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

---

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

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

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

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

【讨论】：

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

@Noelle，然后您必须将特定样式添加到子项。你的父母风格正在接管。 CSS 级联起来。因此，除非指定子样式，否则子代将继承父代。

哦，哇。列表...我永远不会完全正确！哈哈。谢谢@Adrift - 该列表正在运行。

谢谢@Carlos。以后会多加注意的！

【参考方案2】：

如果你给nav width: auto; margin: auto; ，我认为它应该可以工作 我通常会在 Chrome 调试器中鬼混，以解决此类问题。