我有一个使用以下 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>
这很好,直到浏览器达到大约 740 像素或更小,导航栏不再适合一行。我想让它折叠成两行,但它得到了一个水平滚动条。我尝试使用媒体查询来解决这个问题:
但这只会在导航栏元素下方创建一个空白空间,而不会真正折叠它。
最佳答案
您的 .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;
}
关于html - 如何让导航栏在较小的浏览器上出现在两行上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52638525/