我正在尝试将导航栏定位到我网站的顶部中心,但我无法摆脱按钮之间的小空间。
我尝试了很多不同的CSS属性,但没有成功。
另外,我在导航栏里面的位置不在中心位置,而是在右边一点点? 怎么样?
最后,我在底部添加了一些媒体查询,左侧也有一些不需要的空间 另外,他们并没有真正集中在中间。
这是我的JSFiddle:http://jsfiddle.net/RHSab/96/
<header>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#" id="#logo"><img class="topleftlogo" src="images/logo.png"/></a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
答案 0 :(得分:2)
你需要在ul
上添加cssul {
padding-left: 0;
}
header ul li {
display: block;
width: 100%;
}
header a {
padding: 0;
height: 30px;
color: white;
background: rgba(0,0,0,0.1);
height: 60px;
font-family: 'Roboto Slab', serif;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
它将以自己为中心。
答案 1 :(得分:1)
header{text-align: center;}
header ul{
display: inline-block;
overflow: hidden;
}
header ul li{float: left;}