居中导航栏 [英] Centering navigation bar
本文介绍了居中导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在将导航栏居中时遇到问题,我尝试过display:inline-block,然后像大多数帖子所建议的那样对齐中心,但这似乎不起作用.
I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
推荐答案
好吧,终于明白了:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
移除浮标:向左;
由于导航是包含div的整个宽度,因此无需弄乱浮点数,列表项将只显示以下内容:inline;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
这篇关于居中导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文