当屏幕变小时，如何使导航栏堆栈上的元素一个叠一个

Question

当有人使用手机或调整屏幕大小时，我如何使导航栏中的元素堆叠在一起？它对我来说已经起到了一点作用，因为当它变小时，我的导航栏中只有最后一个元素会低于其他元素，但它是唯一一个会下降的元素，其他元素只是出于某种原因留在原地。这是我的代码：

body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: auto;
position: relative;
margin: .4em auto;
background-color: white;
overflow: hidden;
}
nav ul {
padding: 0%;
position: relative;
margin: .5em auto;
list-style: none;

}
nav ul li {
width: 15%;
margin: 0 .5%;
margin-left: 3%;
display: inline;
float: left;
text-align: center;
}
.logo img {
position: relative;
float: left;
}

nav a {
width: 100%;
text-decoration: none;
color: black;
text-align: center;
padding: 5%;
font-size: 3em;
}
#navbar ul li a:hover {
margin-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
background-color: rgb(173, 12, 7);
color: white;

}

<nav>
<div class="logo"><a href="#"><img src="CSS/logo.jpg" id="logo" width="250" height="150"></a></div>
<div style="width: 1100px; margin: 0 auto;">
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Store</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
</div>
</nav>

Answer 1

通过阅读您的问题，我推断，当屏幕宽度减少时，您希望导航栏元素一个接一个地堆叠，如果是这样，您可以这样做，但导航栏不是这样工作的。我向你推荐第二种方式(滚动经过这个片段(

两个解决方案都使用css flexbox属性，如display: flex、flex-wrap: wrap，第二个解决方案使用属性flex-direction: column

第一个解决方案：

body {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
flex-wrap: wrap;
width: 100vw;
}
#navbar > ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
flex: 1 1;
padding: 0 0.5rem;
}
a {
color: black;
padding: 0.5rem;
}
#navbar > ul > li:hover > a{
background: black;
color: white;
}

<nav>
<div style="width: 1100px; margin: 0 auto;">
<div id="navbar">
<div class="logo">
<a href="#">
<img src="/logo.jpg" id="logo" width="70" height="70">
</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Store</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
</div>
</nav>

但我建议您使用这种方式，当到达断点时，使用媒体查询来正确说明导航栏，这里的字体大小保持为1em，移动屏幕的媒体断点添加为400px

body {
margin: 0;
padding: 0;
min-height: 100vh;
}
#navbar {
display: flex;
flex-wrap: wrap;
width: 100vw;
}
#navbar > ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
flex: 1 1;
padding: 0 0.5rem;
}
a {
color: black;
padding: 0.5rem;
}
#navbar > ul > li:hover > a{
background: black;
color: white;
}
@media only screen and (max-width: 400px) {
#navbar {
align-items: center;
}
.logo {
text-align: center;
}
#navbar, #navbar > ul {
flex-direction: column;
min-height: 200px;
justify-content: space-around;
}
}

<nav>
<div style="width: 1100px; margin: 0 auto;">
<div id="navbar">
<div class="logo">
<a href="#">
<img src="/logo.jpg" id="logo" width="70" height="70">
</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Store</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
</div>
</nav>