Navigationsleiste mit dem Titel auf der linken und Tasten auf der rechten Seite

Question

Dies ist, was mein nav bar wie jetzt aussieht:

Dies ist, was ich es wie (mit dem Titel auf der linken Seite und die Tasten sehen wollen auf der rechten Seite):

getrennt ich die Navigationsleiste in eine linksbündig Liste für den Titel und eine rechts ausgerichtet Liste für die Tasten, aber aus irgendeinem Grund werden die beiden Listen auf einander stapeln, anstatt zu sein auf einer Linie. Wie erstelle ich oben die Navigationsleiste?

HTML

<div class = "navBarWrapper"> 
    <div class="top bar"> 
     <ul class = "left"> 
      <li class = "title">Photo Albums</li> 
     </ul> 
     <ul class = "right"> 
      <li class = "buttons"> <a class = "iconLink" href = ""><img class = "iconNotHover" src = "images/uploadImage.png" alt = "uploadImage" width = "40" align = "middle"/></a></li> 
      <li class = "buttons"> <a href = "login.html" class="otherPages">Login</a></li> 
     </ul> 
    </div> 
</div> 

CSS

.navBarWrapper { 
    position: fixed; 
    z-index: 1; 
    width: 100%; 

} 

.left { 
    text-align: left; 
} 

.right { 
    text-align: right; 
} 

.bar { 
    height: 8.02%; 
} 


.bar li { 
    display: inline-block; 
} 

Answer 1

Sie wollen nicht text-align verwenden, um ein Blockelement nach links oder rechts zu bewegen. Dadurch werden Inline-Elemente innerhalb eines Blockelements nur nach links oder rechts ausgerichtet, und das Blockelement befindet sich immer noch in seiner eigenen Zeile.

Sie können die Links/Rechts-Elemente nach links/rechts schwimmen, aber ich würde Flexbox auf dem übergeordneten verwenden, justify-content: space-between zu/rechts, getrennten linken und align-items sie vertikal ausrichten, wie Sie wollen.

.navBarWrapper { 
 
    position: fixed; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
.bar { 
 
    height: 8.02%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.bar li { 
 
    display: inline-block; 
 
}

<div class="navBarWrapper"> 
 
    <div class="top bar"> 
 
    <ul class="left"> 
 
     <li class="title">Photo Albums</li> 
 
    </ul> 
 
    <ul class="right"> 
 
     <li class="buttons"> 
 
     <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a> 
 
     </li> 
 
     <li class="buttons"> <a href="login.html" class="otherPages">Login</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Oder wenn Sie wollen, dass sie schweben, ist hier, dass das Layout mit overflow: auto auf .bar den Schwimmer zu löschen.

.navBarWrapper { 
 
    position: fixed; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    float: left; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
.bar { 
 
    height: 8.02%; 
 
    overflow: auto; 
 
} 
 

 
.bar li { 
 
    display: inline-block; 
 
}

<div class="navBarWrapper"> 
 
    <div class="top bar"> 
 
    <ul class="left"> 
 
     <li class="title">Photo Albums</li> 
 
    </ul> 
 
    <ul class="right"> 
 
     <li class="buttons"> 
 
     <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a> 
 
     </li> 
 
     <li class="buttons"> <a href="login.html" class="otherPages">Login</a></li> 
 
    </ul> 
 
    </div> 
 
</div>