Logo und Navigationsleiste inline

Question

Ich habe versucht, dieses Problem für ein paar Stunden jetzt zu beheben, ohne Erfolg. Ich habe viele verschiedene Websites nach Antworten durchsucht, und ich zeichne ein Leerzeichen.

Ich versuche im Grunde, sowohl das Logo, als auch die Links der Navigationsleiste (das Menü) aneinanderzureihen, so dass sie aneinander gereiht sind. Die Links der Navigationsleiste sollten vertikal mit dem Logo zentriert sein.

Ich kann es manuell tun, indem Sie die genauen Pixel etc, aber offensichtlich ist dies nicht viel nutzen. Ich habe auch versucht, das Logo als ein li-Element zu haben, oder es ist ein eigenes getrenntes div, aber ich kann nicht scheinen, es zur Arbeit zu bringen.

Jede Hilfe würde sehr geschätzt werden, zusammen mit möglicherweise eine Writ-up, wo ich falsch liege.

Vielen Dank.

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 kann auf Geige

Answer 1

Wickeln Sie Ihr Logo in einem Behälter:

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

Set es display: inline-block und vertical-align: middle.

Stellen Sie außerdem sicher, dass das Bild korrekt in den Container passt.

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

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

Wickeln Sie Ihr Nav in einen Container;

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

Auch dies display: inline-block und vertical-align: middle gesetzt.

Geben Sie ihm eine Breite von weniger als das Bild, damit es neben es in den Container passen kann. Dies gilt nicht wirklich die Elemente vertikal zentriert

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

JSFIDDLE

Wenn Sie Ihr Menü rechts ausrichten können Sie

.nav { 
    text-align: right; 
} 

Answer 2

Mit der Magie des flexbox finden, können wir so etwas wie dies mit nur erreichen ein paar Zeilen.

Ist es das oder mussten Sie es noch ein wenig mehr optimieren?

.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>

Answer 3

Versuchen float: left auf dem Logo verwenden und ihm eine feste Breite geben, damit er nicht die gesamte Breite des Behälters wie ein Standard-Block-Level-Element nicht überspannen:

jsfiddle Beweis : https://jsfiddle.net/rLL36dz6/15/

Nicht jsfiddle Beweis:

.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>

Sie auch setzen Logo in ul>li konnte einfach und es inline-block oder inline machen.

Sie müssen Paddings oder vertikale Ausrichtung festlegen, um Objekte horizontal zu zentrieren. Ich kann nicht im Detail erklären, ich muss noch gehen; könnte morgen noch weiter klären.