如何集中响应导航栏

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