如何集中響應導航欄

Question

我不能讓這個導航欄居中。請幫忙。

這裏是我的html：

<div class="nav"> 
      <ul id="menu"> 
       <li><a href="home.html">Home</a></li> 
       <li><a href="latestnews.html">Latest News</a></li> 
       <li><a href="resultsevents.html">Results & Events</a></li> 
       <li><a href="fundraising.html">Fundraising</a></li> 
       <li><a href="gallery.html">Gallery</a></li> 
      </ul> 
</div> 

這裏是我的CSS：

#nav { 
margin:0px auto; } 

ul { 
display: inline-block; 
list-style-type:none; 
margin:0 auto; 
padding:0; 
position: absolute; } 

li { 
display:inline; 
float: left; 
margin-right: 1px; } 

li a { 
display:inline-block; 
min-width:140px; 
height: 50px; 
text-align: center; 
line-height: 50px; 
font-family: Century Gothic, Candara, Tahoma, sans-serif; 
color: #fff; 
background: #2f3036; 
text-decoration: none; } 

li:hover a { 
background: #659d32; } 

li:hover ul a { 
background: #f3f3f3; 
color: #2f3036; 
height: 40px; 
line-height: 40px; } 

li:hover ul a:hover { 
background: #659d32; 
color: #fff; } 

li ul { 
display: none; } 

li ul li { 
display: block; 
float: none; } 

li ul li a { 
width: auto; 
min-width: 100px; 
padding: 0 20px; } 

ul li a:hover + .hidden, .hidden:hover { 
display: block; } 

.show-menu { 
font-family: Century Gothic, Candara, Tahoma, sans-serif; 
text-decoration: none; 
color: #fff; 
background: #659d32; 
text-align: center; 
padding: 10px 0; 
display: none; } 

input[type=checkbox]{ 
display: none; } 

input[type=checkbox]:checked ~ #menu{ 
display: block; } 

@media screen and (max-width : 760px){ 

ul { 
    position: static; 
    display: none; 
} 

li { 
    margin-bottom: 1px; 
} 

ul li, li a { 
    width: 100%; 
} 

.show-menu { 
    display:block; 
} 
} 

我嘗試添加圍繞整個事情股利和保證金設置爲自動但處理不當的工作。林不知道該怎麼做。

Answer 1

我想，爲什麼你的汽車的利潤沒有工作的原因是因爲你需要確定你的包裝的寬度。還要確保你使用了正確的選擇器＃作爲id和。上課。以下介紹了ID如何使導航居中。

jsFiddle

<div class="wrapper"> 
<div class="nav"> 
      <ul id="menu"> 
       <li><a href="home.html">Home</a></li> 
       <li><a href="latestnews.html">Latest News</a></li> 
       <li><a href="resultsevents.html">Results & Events</a></li> 
       <li><a href="fundraising.html">Fundraising</a></li> 
       <li><a href="gallery.html">Gallery</a></li> 
      </ul> 
</div> 
</div> 

添加到您的CSS：

.wrapper { 

    width:80%; 
    margin-left:auto; 
    margin-right:auto; 

} 

Answer 2

首先你的目標#nav同時根據您的HTML是.nav。

然後，你需要的寬度，以便有一箇中心位置設置爲你的資產淨值的父母。

Working example

.nav { 
    margin:0px auto; 
    width:705px; 
} 

編輯：由於您的列表項和鏈接沒有反應，它沒有意義的比例添加到母公司的資產淨值。

您可以使用這樣的事情有響應中心導航：

.nav { 
    margin:0px auto; 
    width:90%; 
} 
ul { 
    list-style-type:none; 
    padding:0; 
} 
li { 
    float: left; 
    width:18%; 
} 
li a { 
    width:100%; 
} 

Answer 3

你幾乎擁有它，使用：

.nav { 
    display: block; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 960px; 
} 

你只需要簡單地調整你的max-width移動導航欄到中心（取決於你的頁面容器的寬度）。

See Example