[英]how to center responsive navigation bar
i cant get this navigation bar to center. 我无法将此导航栏居中。 Please help. 请帮忙。
Here is my html: 这是我的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>
Here is my css: 这是我的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;
}
}
I tried adding a div around the whole thing and setting margin to auto but that hasnt worked. 我尝试在整个事情上添加一个div并将margin设置为auto,但这没有用。 Im not sure what to do. 我不确定该怎么办。
Firstly you're targeting #nav
while it's .nav
according to your html. 首先,根据您的html,将#nav
定位为.nav
。
Then you need to set a width to your nav parent in order to have a centered position. 然后,您需要为导航父设置宽度,以使其居中。
.nav {
margin:0px auto;
width:705px;
}
Edit : Since your list items and links aren't responsive, it doesn't make sense to add a percentage to the parent nav. 编辑 :由于您的列表项和链接没有响应,因此没有必要向父级导航添加一个百分比。
You can use something like this to have a responsive centered navigation: 您可以使用类似这样的内容来进行响应式居中导航:
.nav {
margin:0px auto;
width:90%;
}
ul {
list-style-type:none;
padding:0;
}
li {
float: left;
width:18%;
}
li a {
width:100%;
}
I think the reason why your auto margins didn't work is because you need to define a width on your wrapper. 我认为您的自动页边距不起作用的原因是因为您需要在包装纸上定义宽度。 Also make sure that you are using the right selector # for id and . 另外,请确保您为ID和使用正确的选择器#。 for class. 上课。 Here's how id go about centering the navigation. 这是id使导航居中的方式。
<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>
add this to your css: 将此添加到您的CSS:
.wrapper {
width:80%;
margin-left:auto;
margin-right:auto;
}
You almost had it, use: 您几乎拥有它,请使用:
.nav {
display: block;
margin: 0 auto;
width: 100%;
max-width: 960px;
}
You will simply need to adjust your max-width
to move the navbar into the center (depending the width of your page container). 您只需要调整max-width
即可将导航栏移到中心(取决于页面容器的宽度)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.