无法居中我的导航 [英] Can't Center My Navigation

问题描述

我有一个导航栏，必须是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：大写; 
 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; 
职位：亲属; 
背景：＃C0C0C0; 
} 
 nav ul：在{
 content：\2022后面; 
明确：两者; 
 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; 
位置：绝对; 
 top：100％; 
 z-index：100; 
} 
 nav ul ul li {
 float：none; 
职位：亲属; 
} 
 nav ul ul li a {
 padding：15px 40px; 
 border-top：1px solid #FFFFFF; 
 border-bottom：1px solid #FFFFFF; 
} 
 nav ul ul ul {
 position：absolute;剩余
：100％; 
 top：0; 
} 
  

我试着将nav边距添加到nav id中，无济于事，然后我尝试用一​​个类中间内容排列的div来包装列表，但那也行不通。然后我尝试文字对齐无济于事。我不知道该怎么做，所以任何帮助将不胜感激！

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

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

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

解决方案

不用浮动列表项，只需将其显示值更改为 inline-block; ，因为您在其包含的块中指定了 text-align：center; 。

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

---

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

您只需将选择器修改为仅针对列表项，即第一个< ul> ：

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

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

I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my 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;
}

I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!

Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/

UPDATE: After taking @Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?

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

解决方案

Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.

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

---

The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.

You just need to modify the selector to only target the list-items are the children of the first <ul>:

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

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

这篇关于无法居中我的导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！