對齊NavBar中心寬度：100％;

我知道這個問題已被問了100次，但我找不到幫助我的線程。我試圖中心導航欄，我的div有100％的寬度。我只想讓我的導航欄居中。任何幫助將不勝感激！這裏是我的HTML：對齊NavBar中心寬度：100％;

<! Doctype HTML > 
<html> 
<head> 
    <meta http-equiv="refresh" content="10" /> 
    <title>NavBar WareHouse</title> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
</head> 
<body> 
    <div id="nav"> <!-- Nav Start --> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="tabbed.html">Tabbed</a> 
       <ul> 
        <li><a href="tab-colour.html">Colourful</a></li> 
        <li><a href="tab-elegant.html">Elegant</a></li> 
        <li><a href="tab-complex.html">Complex</a></li> 
       </ul> 
      </li> 
      <li><a href="regular.html">Regular</a> 
       <ul> 
        <li><a href="reg-colour.html">Colourful</a></li> 
        <li><a href="reg-elegant.html">Elegant</a></li> 
        <li><a href="reg-complex.html">Complex</a></li> 
       </ul> 
      </li> 
      <li><a href="wild.html">Wild</a></li> 
     </ul> 
    </div> 
</body> 
</html>

我的CSS：

/* Main CSS */ 

html{ 
    font-family: sans-serif; 
} 
body{ 
    background:#e8e8e8; 
} 
#nav{ 
    width:100%; 
    background: #666; 
    height:38px; 
    padding:0; 
} 
#nav ul{ 
    display:inline-block; 
    text-align:center; 
    background-color::#666; 
    width:100%; 
    padding:0; 
    margin:0 auto; 
    list-style: none; 
} 
#nav li{ 
    width:100%; 
    text-align: center; 
    width:75px; 
    float:left; 
    position:relative; 
    padding:10px; 
    background:#666; 
} 
#nav li:hover{ 
    background: maroon; 
} 
#nav a{ 
    padding:10px; 
    color:#fff; 
    text-decoration:none; 
} 
#nav a:hover{ 
    background: maroon; 
} 
#nav ul ul{ 
    display:none; 

} 
#nav ul li:hover ul{ 
    width:75px; 
    text-align: none; 
    display:block; 
    position:relative; 
    left:-10px; 
    top:10px; 
}

來源

2013-01-24 Col1107

它的類似這樣的問題，我想找到一個方法來「中心不能持有爲時已晚」到我的回答。 –

你的CSS意味着，導航欄居然被集中，但因爲你的每一個元素設置爲全頁面寬度，您的導航列表項目元素全部浮動到左側。您實際上希望您的中心導航佔據您的總頁面寬度的多少比例？圖表，首先數額並相應地調整元素。

來源

2013-01-24 02:50:33

這在Firefox 18爲我工作...

#nav ul{ 
    /*display:inline-block; remove this */ 
    text-align:center; 
    background-color::#666; 
    width:400px; /* set this to a static width */ 
    padding:0; 
    margin:0 auto; 
    list-style: none; 
}

來源

2013-01-24 02:56:41 encoder

對齊NavBar中心寬度：100％;

回答

相關問題