1

これはもう何時間も私を殺しています :'( ヘッダー内にロゴとナビゲーションバーを配置するのを手伝ってくれる人はいますか?

「ロゴ」をヘッダー内 (左側) に、「ナビゲーション バー」をヘッダー内 (右側) に配置しようとしていますが、多くの異なるプロパティを試しても、ナビゲーション バーは常にヘッダー コンテナーの外側にあります。 . ヘッダーを修正する必要があります。

http://jsfiddle.net/L7kPu/10/

<header>
        <a href="#" id="logo">Logo</a>

                    <ul id="nav" class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>

</header>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>

html, body{
  margin:0px; padding:0px; height: 100%; }

section {
    height: 100%;
}

header{
  z-index: 1;
  position:fixed; 
  width:100%;  
  background:rgba(0,0,0,0.1);
}

header ul{
    float:right;

}

header ul li{
    display: inline;
    float:left;

}
header a{
  color:white;
  background:rgba(0,0,0,0.1); 
  display:inline-block; 
  padding:0px 30px; 
  height:60px;
  line-height:60px; 
  text-align:center;
  font-family: 'Roboto Slab', serif; 
  text-decoration:none;
  text-transform:uppercase; 
  letter-spacing:2px; 
  font-weight:700;
}
4

3 に答える 3

4

あなたulにはマージンとパディングがありました:)

働くフィドル

header ul{
    float:right;
    padding: 0;
    margin: 0;
}

header ul li{
    display: inline;
    float:left; 
}
header a{
  color:white;
  background:rgba(0,0,0,0.1); 
  display:inline-block; 
  padding:0px 25px; 
  height:60px;
  line-height:60px; 
  text-align:center;
  font-family: 'Roboto Slab', serif; 
  text-decoration:none;
  text-transform:uppercase; 
  letter-spacing:2px; 
  font-weight:700;
}

header aまた、フィドルのために左右のパディングを変更しました。

于 2013-06-19T18:18:37.790 に答える
2

更新されたフィドル コードの変更された css は次のとおりです。

#logo {
    float: left;
    position: aboslute;
}
#nav {
    white-space: nowrap;
    margin-top: 0;
    margin-right: 0;
}
header {
    z-index: 1;
    position:fixed;
    width:100%;
    background:rgba(0, 0, 0, 0.1);
    height: 60px;
}
于 2013-06-19T18:22:57.607 に答える
1

ここ：

header ul
{
 float:right;
     margin: 0; 
}

header ul li
{
display: inline;
float:left;
margin: 0;
}

また、コードを少しクリーンアップしました。

http://jsfiddle.net/L7kPu/17/

于 2013-06-19T18:19:03.447 に答える