0

ナビゲーション バーを Web サイトの上部中央に配置しようとしていますが、ボタン間の小さなスペースを取り除くことができません。
さまざまな 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>
4

2 に答える 2

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;
}

それ自体が中心になります。

于 2013-08-05T12:29:05.737 に答える
1

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

于 2013-08-05T12:31:41.153 に答える