html - 如何让导航栏完全显示并居中对齐

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>