需要Navbar修复

时间:2013-08-05 12:19:53

标签: html css

我正在尝试将导航栏定位到我网站的顶部中心,但我无法摆脱按钮之间的小空间。
我尝试了很多不同的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>

2 个答案:

答案 0 :(得分:2)

你需要在ul

上添加css
ul {
   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;}