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：

<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;}

导航样式整体导航栏，给它一个固定的宽度和高度，然后使用margin-left：auto;和保证金权利：auto;然后nav ul display：block将ul设置为导航栏的全宽和text-align：center;确保将文本设置为居中。 nav ul li样式化各个列表元素并显示：inline-block;允许他们排列在一起。

希望这会有所帮助

Answer 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;
}

请注意，宽度可以是您想要的任何宽度，但保持边距非常重要：0自动。

CSS简写margin: 0 auto;评估为：

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

Here's jsfiddle to demonstrate this

中心导航栏具有固定宽度

2 个答案: