如何让导航栏在较小的浏览器上显示在两行上?

Question

我有一个带有导航栏的网站，使用以下 HTML：

.nav-bar {
background-color: white;
display: flex;
align-items: flex-start;
}
.nav-bar a {
cursor: pointer;
display: inline-block;
background-color: white;
color: black;
text-decoration: none;
font-size: 25px;
padding: 16px 40px;
border-radius: 3px;
margin: 0px;
transition: 0.3s;
letter-spacing: 2px;
}
@media only screen and (max-width: 737px) {
.nav-bar {
max-width: 737px;
height: 120px;
}
}

<div class="nav-bar">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">BOOK</a>
<a href="#">CONTACT</a>
</div>

这很好，直到浏览器达到大约 740px 或更低，导航栏不再适合一行。我希望它折叠到两行上，但它会得到一个水平滚动器。我尝试使用媒体查询解决此问题：

但这只会在导航栏项目下方创建一个空白区域，而不会实际折叠它。

Answer 1

您需要.nav-bar中的flex-wrap属性。如果.nav-bar a元素溢出，这将包装它们。此外，您不需要a元素即可显示为inline-block。

.nav-bar {
background-color: white;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.nav-bar a {
cursor: pointer;
background-color: white;
color: black;
text-decoration: none;
font-size: 25px;
padding: 16px 40px;
border-radius: 3px;
margin: 0px;
transition: 0.3s;
letter-spacing: 2px;
}

Answer 2

您应该删除"display： flex;"。

.nav-bar {
background-color: white;
align-items: flex-start;
}
@media only screen and (max-width: 737px) {
.nav-bar {
max-width: 737px;
height: 120px;
overflow: hidden;
}
}