如何讓導航欄充分顯示並居中對齊

Question

我使用的是響應式導航欄，因此當屏幕寬度低於600像素時，導航欄會變成下拉列表。導航欄正在工作，除非它看起來很可怕。

1. 元素都在左側，不會在頁面上均勻分佈。我用了一個左邊的浮標，以便它們顯示在水平線上。

2. 標題溢出到新行。我想的標題只是流了出來在一行

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

我改變你的CSS使用flexbox。在父級導航中使用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>