私は私の頭の上に同じ行にいたい2つのnavsを持っています

-2

私のヘッダーの上部に、私は2つのnavsを持っています。今、彼らはお互いの上に、like thisです。私は私の頭の上に同じ行にいたい2つのnavsを持っています

私は彼らが横たわって欲しいです。私がする必要があるのは、nav要素を表示するように設定することです：inline;しかし動作しません。私はフロートを左にして右に浮かべてみました。私はたくさんのオプションを試して、いくつかの研究をして、ここで本当に迷っていると感じます。

ここはhtmlです。

<body> 
<header> 
    <nav class="navbar"> 
    <ul class="nav"> 
     <li>HOME</li> 
     <li>WORK</li> 
     <li>ABOUT</li> 
     <li>CONTACT</li> 
    </ul> 
    </nav> 
    <nav> 
    <ul class="nav"> 
     <li><img src="images/youtube.png" alt=""></li> 
     <li><img src="images/twitter.png" alt=""></li> 
     <li><img src="images/facebook.png" alt=""></li> 
    </ul> 
    </nav> 
</header>

出典

2017-06-17 adgoth11

まず最初に、上記のコードは機能しません。 –

あなたが持っている最初の間違いは、あなたの現在のコードは、ブートストラップ・ナビゲーションバーでは動作しないということです。 navbar-rightクラスは、正しい方向に進むのに役立ちます。あなたが同じ行に2 navbarsため、このような何かを持っている必要があります：

<header> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <ul class="nav navbar-nav"> 
     <li>HOME</li> 
     <li>WORK</li> 
     <li>ABOUT</li> 
     <li>CONTACT</li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><img src="images/youtube.png" alt=""></li> 
     <li><img src="images/twitter.png" alt=""></li> 
     <li><img src="images/facebook.png" alt=""></li> 
     </ul> 
    </div> 
    </nav> 
</header>

場合は、あなたのカスタムCSSのために、その後、ブートストラップを使用していない場合、あなたはfloat: leftとfloat: rightを与える必要があります。私は、重複<nav>を削除変更し、新しいクラスにnav-rightを使用してHTMLを再フォーマットした：

.navbar {overflow: hidden;} 
 
.nav, .nav li {display: block; margin: 0; padding: 0; list-style: none;} 
 
.nav li {display: inline-block;} 
 
.nav {float: left;} 
 
.nav.nav-right {float: right;}

<header> 
 
    <nav class="navbar"> 
 
    <ul class="nav"> 
 
     <li>HOME</li> 
 
     <li>WORK</li> 
 
     <li>ABOUT</li> 
 
     <li>CONTACT</li> 
 
    </ul> 
 
    <ul class="nav nav-right"> 
 
     <li><img src="images/youtube.png" alt=""></li> 
 
     <li><img src="images/twitter.png" alt=""></li> 
 
     <li><img src="images/facebook.png" alt=""></li> 
 
    </ul> 
 
    </nav> 
 
</header>

出典

2017-06-17 13:36:31

navにdisplay: inline-block;を追加し、あなたがhorzontally整列リスト項目をしたい場合は、またにdisplay: inline-block;を追加しますnav li：

nav { 
 
display: inline-block; 
 
} 
 
nav li { 
 
display: inline-block; 
 
}

<header> 
 
    <nav class="navbar"> 
 
    <ul class="nav"> 
 
     <li>HOME</li> 
 
     <li>WORK</li> 
 
     <li>ABOUT</li> 
 
     <li>CONTACT</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul class="nav"> 
 
     <li><img src="images/youtube.png" alt="">A</li> 
 
     <li><img src="images/twitter.png" alt="">B</li> 
 
     <li><img src="images/facebook.png" alt="">C</li> 
 
    </ul> 
 
    </nav> 
 
</header>

あなたは左と右を配置することを意図している場合

、あなただけのli要素にinline-blockを入れて、二nav

nav:first-of-type { 
 
float: left; 
 
} 
 
nav:last-of-type { 
 
float: right; 
 
} 
 
nav:first-of-type ul { 
 
float: left; 
 
padding-left: 0; 
 
} 
 
nav li { 
 
display: inline-block; 
 
}

<header> 
 
    <nav class="navbar"> 
 
    <ul class="nav"> 
 
     <li>HOME</li> 
 
     <li>WORK</li> 
 
     <li>ABOUT</li> 
 
     <li>CONTACT</li> 
 
    </ul> 
 
    </nav> 
 
    <nav> 
 
    <ul class="nav"> 
 
     <li><img src="images/youtube.png" alt="">A</li> 
 
     <li><img src="images/twitter.png" alt="">B</li> 
 
     <li><img src="images/facebook.png" alt="">C</li> 
 
    </ul> 
 
    </nav> 
 
</header>

出典

2017-06-17 13:36:56 Johannes

あなたにに最初にfloat: leftとfloat: rightを置くことができますそのためにflexboxを使うべきです。

header { 
    display: flex; 
    justify-content: space-between; 
}

これはheaderの両方の子供が同じライン上にあるようになり、彼らはあなたが望むものであるエッジ上にあるようにするもの、それらの間の空間とするためにそれらを正当化します。

また、この2つの子のスタイルを設定する必要がありますが、それはあなた次第です。

出典

2017-06-17 13:41:26 Albert221

私は私の頭の上に同じ行にいたい2つのnavsを持っています

答えて

関連する問題