如何使响应式导航栏居中答案

【问题标题】：how to center responsive navigation bar如何使响应式导航栏居中
【发布时间】：2015-04-01 20:34:13
【问题描述】：

我无法让这个导航栏居中。请帮忙。

这是我的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;
}
}

我尝试在整个内容周围添加一个 div 并将边距设置为自动，但没有奏效。我不知道该怎么办。

【问题讨论】：

请添加fiddle，以便我们查看问题所在。

标签： html css responsive-design navigation

【解决方案1】：

首先，根据您的 html，您的目标是 #nav，而它是 .nav。

然后你需要为你的 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%;
}

【讨论】：

【解决方案2】：

我认为您的自动边距不起作用的原因是您需要在包装器上定义宽度。还要确保您使用正确的选择器 # 用于 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;

}

【讨论】：

【解决方案3】：

你几乎拥有它，使用：

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

您只需调整max-width 即可将导航栏移至中心（取决于页面容器的宽度）。

See Example

【讨论】：