ロゴとナビゲーションバーのインライン

私はこの問題を数時間修正しようとしていますが、無駄です。私は答えのための多数の異なったウェブサイトを拾い読みした、私は空白を描く。ロゴとナビゲーションバーのインライン

基本的に、ロゴとナビゲーションバーのリンク（メニュー）の両方を並べて表示するようにしています。ナビゲーションバーのリンクは、ロゴに垂直に配置する必要があります。

私はそれを正確にピクセルなどを設定することで手動で行うことができますが、明らかにこれはあまり役に立ちません。私はまた、李の要素としてロゴを持っているしようとした、またはそれは自分の別のdivですが、私はそれを働かせるように見えることはできません。

私が間違っていると思われる箇所については、お手伝いをさせていただきます。

ありがとうございます。

JSFiddle：https://jsfiddle.net/rLL36dz6/

HTML

<img class="logo" src="http://i.imgur.com/z38lrml.png" border="0 "width="7%"/> 

    <ul class="nav_bar_links_ul"> 

     <li class="dropdown menulinks"> 
      <a href="#" class="dropbtn">Games</a> 
      <div class="dropdown-content"> 
       <a href="#">Game 1</a> 
      </div> 
     </li> 

     <li class="dropdown menulinks"> 
      <a href="#" class="dropbtn">Websites</a> 
      <div class="dropdown-content"> 
       <a href="#">Website 1</a> 
       <a href="#">Website 2</a> 
      </div> 
     </li> 

     <li class="dropdown menulinks"> 
      <a href="#">About</a> 
      <div class="dropdown-content"> 
       <a href="#">Meet the Team</a> 
       <a href="#">About 2</a> 
      </div> 
     </li> 

     <li class="twi"> 
      <a href="#"><img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /></a> 
     </li> 
     <li class="twi"> 
      <a href="#"><img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /></a> 
     </li> 
    </ul>  
</div>

CSSがflexboxの魔法をいじる

出典

2017-02-07 JBond4546

容器の中にあなたのロゴをラップ：

<div class="logo"> 
     <img class="logo" src="http://i.imgur.com/z38lrml.png" /> 
</div>

はdisplay: inline-blockとvertical-align: middleに設定します。

また、画像がコンテナに正しく収まるようにしてください。

.logo { 
    display: inline-block; 
    vertical-align: middle; 
    width: 7%; 
} 

.logo img { 
    height: auto; 
    width: 100%; 
}

コンテナにナビをラップします。

<div class="nav"> 
    <ul class="nav_bar_links_ul"> 
    ... 
    </ul> 
</div>

もdisplay: inline-blockとvertical-align: middleに設定します。

画像の幅よりも小さくして、容器の横に収まるようにします。

.nav { 
    display: inline-block; 
    vertical-align: middle; 
    width: 90%; 
}

JSFIDDLE

あなたは

.nav { 
    text-align: right; 
}

出典

2017-02-07 17:15:08 sol

それはまさに私が何をしているかです。本当にありがとう、私は次回に間違ってやっていることを正確に見ることができます。私はあなたに+ repか何かを与えたいと思いますが、私はstackoverflowに新しいものですから、それを調べます！ – JBond4546

うれしかったです。 – sol

で見つけることができ、私たちはこのような何かを達成することができます数行。

これはそれですか、それとももう少し微調整する必要がありますか？

.nav_bar { 
 
    margin: 0 auto; 
 
    margin-top: 6px; 
 
    margin-bottom: 6px; 
 
    background-color: #00021a; 
 
    width: 960px; 
 
} 
 
/* ALL NAVBAR GOES BELOW */ 
 

 
.all_navigation li { 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 
.all_navigation{ 
 
    display: flex; 
 
    height: 60px; 
 
    align-items: center; 
 
} 
 
.nav_bar_links_ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    align-items: center; 
 
} 
 
.nav_bar_links_ul li { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
} 
 
.nav_bar_links_ul li, 
 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.nav_bar_links_ul li, 
 
a:hover { 
 
    color: #2E9AFE; 
 
} 
 
.nav_bar_links_ul .menulinks li { 
 
    margin-left: 40px; 
 
} 
 
.nav_bar_links_ul .twi { 
 
    display: inline; 
 
} 
 
.menulinks { 
 
    margin-left: 40px; 
 
} 
 
.twi:hover { 
 
    color: #2E9AFE; 
 
} 
 
/* NAVIGATION DROP DOWN */ 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1; 
 
    color: #2E9AFE; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="nav_bar"> 
 
    <div class="all_navigation"> 
 

 
    <img class="logo" src="http://i.imgur.com/z38lrml.png" border="0" width="60" height="auto" /> 
 

 
    <ul class="nav_bar_links_ul"> 
 

 
     <li class="dropdown menulinks"> 
 
     <a href="#" class="dropbtn">Games</a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Game 1</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="dropdown menulinks"> 
 
     <a href="#" class="dropbtn">Websites</a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Website 1</a> 
 
      <a href="#">Website 2</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="dropdown menulinks"> 
 
     <a href="#">About</a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Meet the Team</a> 
 
      <a href="#">About 2</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="twi"> 
 
     <a href="#"> 
 
      <img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /> 
 
     </a> 
 
     </li> 
 
     <li class="twi"> 
 
     <a href="#"> 
 
      <img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

出典

2017-02-07 16:56:08

これは本当に垂直要素をセンタリングしません追加することができます右のあなたのメニューを揃えることを選択した場合。 '.all_navigation'の高さを上げれば、メニュー項目が一番上にあり、ロゴが伸びていることがわかります。 –

それは本質的に私が望むものですが、伸ばすことはできませんし、異なる解像度の画面でも動作するはずです。これは本質的にどのように見たいのですか [link]（http://image.prntscr.com/image/b989860720874644b06610a76c1ca546.png） – JBond4546

スニペットを更新しました。 –

-1

ロゴをfloat: leftを使用して試してみて、それがデフォルトのブロックレベル要素のようなコンテナの幅全体にまたがらないように、それを一定の幅を与える：

jsfiddle証明：https://jsfiddle.net/rLL36dz6/15/

非jsfiddle証明：

.nav_bar { 
 
\t margin: 0 auto; 
 
\t margin-top: 6px; 
 
\t margin-bottom: 6px; 
 
\t background-color: #00021a; 
 
\t width: 960px; 
 
} 
 

 
/* ALL NAVBAR GOES BELOW */ 
 

 
.all_navigation li { 
 
\t list-style: none; 
 
\t display: inline-block; 
 
} 
 

 
.nav_bar_links_ul li { 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t font-size: 16px; 
 
\t font-weight: 600; 
 
} 
 

 
.nav_bar_links_ul li, a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
} 
 

 
.nav_bar_links_ul li, a:hover { 
 
\t color: #2E9AFE; 
 
} 
 

 
.nav_bar_links_ul .menulinks li { \t 
 
\t margin-left: 40px; 
 
} 
 

 
.nav_bar_links_ul .twi { 
 
\t display: inline; 
 
} 
 

 
.menulinks { 
 
\t margin-left: 40px; 
 
} 
 

 
.twi:hover { 
 
\t color: #2E9AFE; 
 
} 
 

 
/* NAVIGATION DROP DOWN */ 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
\t min-width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background-color: #f1f1f1; 
 
\t color: #2E9AFE; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
/* new */ 
 
.nav_bar { 
 
    float: left; 
 
} 
 
.logo { 
 
    float: left; 
 
}

<div class="nav_bar"> \t \t 
 
\t <div class="all_navigation"> 
 
\t \t 
 
\t \t <img class="logo" src="http://i.imgur.com/z38lrml.png" border="0 "width="7%"/> 
 
\t \t 
 
\t \t <ul class="nav_bar_links_ul"> 
 
\t \t \t 
 
\t \t \t <li class="dropdown menulinks"> 
 
\t \t \t \t <a href="#" class="dropbtn">Games</a> 
 
\t \t \t \t <div class="dropdown-content"> 
 
\t \t \t \t \t <a href="#">Game 1</a> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t <li class="dropdown menulinks"> 
 
\t \t \t \t <a href="#" class="dropbtn">Websites</a> 
 
\t \t \t \t <div class="dropdown-content"> 
 
\t \t \t \t \t <a href="#">Website 1</a> 
 
\t \t \t \t \t <a href="#">Website 2</a> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t <li class="dropdown menulinks"> 
 
\t \t \t \t <a href="#">About</a> 
 
\t \t \t \t <div class="dropdown-content"> 
 
\t \t \t \t \t <a href="#">Meet the Team</a> 
 
\t \t \t \t \t <a href="#">About 2</a> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t 
 
\t \t \t <li class="twi"> 
 
\t \t \t \t <a href="#"><img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /></a> 
 
\t \t \t </li> 
 
\t \t \t <li class="twi"> 
 
\t \t \t \t <a href="#"><img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /></a> 
 
\t \t \t </li> 
 
\t \t </ul> \t \t 
 
\t </div> 
 
</div>

また、単にul>liにロゴを入れてinline-blockまたはinline作ることができます。

パディングや垂直方向の整列を設定して、物を水平に配置する必要があります。私は詳細を説明することはまだできません。明日さらに明確にすることができます。

出典

2017-02-07 17:06:41 user31782

イメージ全体を浮かべてみましたが、幅を固定していましたが、いくつかの問題がありました。ロゴがもはや見えないという主なことは、（ナビゲーションバー内にもうなくなった） – JBond4546

ロゴとナビゲーションバーのインライン

答えて

関連する問題