固定宽度的中心导航栏答案

【问题标题】：Center Navigation Bar with FIXED WIDTH固定宽度的中心导航栏
【发布时间】：2014-04-27 15:44:36
【问题描述】：

有人告诉我，固定宽度的导航栏很难居中。这是真的吗？这就是我现在的渴望。

这是我的导航栏 CSS：

nav ul{
  list-style-type: none;
  padding: 15px 0px 32px 0px;   
}

nav ul ul{
  display: none;
}


nav ul li{
  display: inline;
  float: left;  
}

nav ul a{
  color:#666;
  background-color:#CCC;
  text-align: center;
  text-decoration: none;    
  padding: 20px 20px 20px 20px;
  font-family:Arial, Helvetica, sans-serif;     
}

nav ul a: hover{
  color: #FFF;
  background-color: #F60;   
}

这是我的 HTML 代码：

<nav>

    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="products_and_services.html">PRODUCTS &amp; SERVICES</a></li>
        <ul>
            <li><a href="">BROCHURES</a></li>
            <li><a href="">BUSINESS CARDS</a></li>
            <li><a href="">MAGAZINES</a></li>
            <li><a href="">BOOKS</a></li>
            <li><a href="">WEB DESIGN</a></li>
        </ul>          
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="support.html">SUPPORT</a></li>
    <li><a href="contact_us.html">CONTACT US</a></li>
    <li><a href="about_us.html">ABOUT US</a></li>
    </ul>

</nav>

【问题讨论】：

为什么你的第一个 css 属性仍然打开？ display:inline 和 float:left 也不能一起工作。 float:left 自动将display:block 添加到您的元素中
您的 HTML 无效。您有另一个 ul 元素的 ul 子元素。 ul 的唯一有效子代是 li。您需要将您的孩子 ul 包裹在 li 中
很好的帮助里波。我注意到了这一点。
对约瑟夫来说，实际上
之后的
- 的子菜单。

【解决方案1】：

居中导航栏应该不是那么棘手。作为一个非常简单的示例，我编写了以下内容并且效果很好：

HTML：

<nav>
<ul>
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>

</nav>

CSS：

nav {position:relative; top:50px; margin-left:auto; margin-right:auto; width:1024px; height:50px; background-color:#cdcdcd;}

nav ul {display:block; list-style-type:none; text-align:center;}

nav ul li {display:inline-block; margin-left:15px; margin-right:15px;}

nav 为整个导航栏设置样式，给它一个固定的宽度和高度，然后使用 margin-left:auto 将其居中；和边距右：自动；然后 nav ul display:block 将 ul 设置为导航栏的全宽和 text-align:center;确保文本设置为居中。 nav ul li 为各个列表元素设置样式并显示：inline-block；允许他们并排排列。

希望对你有帮助

【讨论】：

很高兴它提供了帮助 :) 如果它完成了这项工作，你会好心地将它标记为已接受的答案吗？谢谢
是的，当然！但我的名声还不允许我这样做。 :-(

【解决方案2】：

首先，正如其他几位发帖人所指出的，您的 HTML 几乎没有问题。如果您将<ul></ul> 嵌套在另一个<ul></ul> 中，则必须将其封装在<li></li> 中

这是您的 HTML，已更正：

<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li>
    <a href="products_and_services.html">PRODUCTS &amp; SERVICES</a>
    <ul>
        <li><a href="">BROCHURES</a></li>
        <li><a href="">BUSINESS CARDS</a></li>
        <li><a href="">MAGAZINES</a></li>
        <li><a href="">BOOKS</a></li>
        <li><a href="">WEB DESIGN</a></li>
    </ul>
</li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="support.html">SUPPORT</a></li>
<li><a href="contact_us.html">CONTACT US</a></li>
<li><a href="about_us.html">ABOUT US</a></li>
</ul>

要使导航居中，您只需将其添加到 CSS 中：

nav { 
    width: 900px;
    margin: 0 auto;
}

请注意，宽度可以是任何你想要的，但保持 margin:0 自动很重要。

CSS 速记 margin: 0 auto; 计算结果为：

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

Here's jsfiddle to demonstrate this

【讨论】：

@ROLDANKING 当然可以！很高兴能提供帮助。