Question

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

Answer 1

你需要在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;
}

它将以自己为中心。

Answer 2

header{text-align: center;} header ul{ display: inline-block; overflow: hidden; } header ul li{float: left;}

需要Navbar修复

2 个答案: