Wie bekomme ich Navbar, um vollständig anzuzeigen und zentriert zu sein?

Question

Ich benutze eine responsive nav bar also, wenn die Breite des Bildschirms unter 600px fällt, verwandelt sich die Navigationsleiste in eine Dropdown-Liste. Die Navigationsleiste funktioniert, außer dass sie schrecklich aussieht.

1. Die Elemente sind alle auf der linken Seite und werden nicht gleichmäßig über die Seite verteilt. Ich benutzte einen Schwimmer, so dass sie in einer horizontalen Linie angezeigt wurden.

2. Die Überschriften verschütten neue Zeilen. Ich will die Überschriften nur aus einer auf der Leitung fließen

HTML:

<ul class="topnav"> 
    <li><a href="Sustainability.html">Sustainability</a></li> 
    <li><a href="Climate%20Change.html">Climate Change</a></li> 
    <li><a href="Home%20Page.html"><img src="Images/Climate-Hikewhite.png" height="50px" href="Home%20Page.html" /></a></li> 
    <li><a href="DIY.html">How You Can Help</a></li> 
    <li><a href="Contact.html">Contact Us</a></li> 
</ul> 

CSS:

/* NAV BAR*/ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #000; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    text-decoration: none; 
    font-size: 24px; 
} 

ul.topnav li { 
    float:left; 
    width: 20%; 
    margin: 0; 
    padding: 0; 

} 

ul.topnav li a { 
    display: block; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    padding-top: 10px; 
    padding-bottom: 5px; 
    display: flex; 
    justify-content: space-around; 
    text-decoration: none; 
    font-size: 17px; 
    color: #EEE; 
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;  
    width: 20%; 
    margin: 0; 
} 

ul.topnav li a:hover:not(.active) {color: green;} 

ul.topnav li a.active {background-color: #4CAF50;} 

ul.topnav li.right {float: right;} 

@media screen and (max-width: 600px){ 
ul.topnav li.right, 
ul.topnav li {float: none;} 

}

Answer 1

Ich änderte CSS flexbox zu verwenden. Verwenden Sie flex in der übergeordneten Navigation und zentrieren Sie sie. Ändern Sie in Ihrer Medienabfrage die Richtung der Elemente zu einer Spalte. Die nth-child(3) dient zur Sichtbarkeit nur so, dass das Bild oben ist. Hoffe das hilft.

.topnav{ 
 
    display: flex; 
 
    list-style:none; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    background: #000; 
 
    font-size: 24px; 
 
    padding: 10px 0; 
 
    align-items: center; 
 
} 
 
.topnav li{ 
 
    padding: 0 15px; 
 
} 
 
.topnav a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
@media screen and (max-width: 700px){ 
 
.topnav{ 
 
    flex-direction: column; 
 
} 
 
.topnav li{ 
 
    padding: 10px 0; 
 
} 
 
.topnav li:nth-child(3){ 
 
    order: -1; 
 
} 
 

 
}

<ul class="topnav"> 
 
    <li><a href="Sustainability.html">Sustainability</a></li> 
 
    <li><a href="Climate%20Change.html">Climate Change</a></li> 
 
    <li><a href="Home%20Page.html"><img src="http://placehold.it/50x50" height="50px" /></a></li> 
 
    <li><a href="DIY.html">How You Can Help</a></li> 
 
    <li><a href="Contact.html">Contact Us</a></li> 
 
</ul>