navbarを完全に表示して中央揃えにする方法

Question

応答のあるナビゲーションバーを使用しているので、画面の幅が600pxを下回ると、ナビゲーションバーがドロップダウンリストに変わります。 nav barはうまくいきますが、恐ろしく見えます。

1. 要素はすべて左側にあり、ページ全体に均等に広がることはありません。私は浮動小数点を使用して、水平線で表示するようにしました。

2. 見出しが改行しています。私は見出しがちょうど1行に流出したい

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

私はflexboxを使用するようにCSSを変更しました。親ナビゲーションでflexを使用し、中央に配置します。あなたのメディアクエリでは、要素の方向を列に変更します。 nth-child(3)は、画像が上になるように視認性を高めるためのものです。お役に立てれば。

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