html - 具有固定宽度的中心导航栏

Question

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

这是我的导航栏 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>

Answer 1

首先，正如其他一些张贴者指出的那样，您的 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 auto 很重要。

CSS 速记 margin: 0 auto;评估为:

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

Here's jsfiddle to demonstrate this