如何解决如何制作水平滚动的导航栏?
当屏幕宽度缩小时,我试图使导航栏中的 ul 可水平滚动。
我查看了一些类似问题的答案,并实施了对我来说似乎有效的解决方案。
然而,ul 及其内容不知何故脱离了导航并停留在导航下的下一行。还有,
我认为将 position: fixed; overflow-y: hidden;
设置为 ul 可以解决问题。但是,相反,它的左侧覆盖了位于导航左角的按钮。
有人能帮我吗??
<!--HTML-->
<body>
<nav class="main-nav">
<div class="btn"><i class="fas fa-bars fa-2x"></i></div>
<ul>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
</ul>
</nav>
</body>
/*CSS*/
.main-nav {
position: fixed;
z-index: 1000;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 3rem;
background-color: #ffffff;
}
.main-nav .btn {
height: 3rem;
width: 3rem;
background-color: chartreuse;
cursor: pointer;
}
.main-nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 2rem;
}
.main-nav ul li a {
display: block;
line-height: 3rem;
height: 100%;
padding: 0 1rem;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
font-weight: 600;
color: black;
}
@media (max-width: 800px) {
.main-nav {
height: 4rem;
white-space: Nowrap;
}
.main-nav ul {
position: fixed;
white-space: Nowrap;
flex-wrap: Nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.main-nav ul li {
flex: 0 0 auto;
}
}
解决方法
所以,我已经在 CodePen 上尝试了您的代码,似乎唯一使您的代码无法正常工作的是媒体查询中 position: fixed
元素上的 ul
规则。
在我看来,由于您打算将所有项目保留在 X 轴的标题内,因此根本不需要 overflow-y: hidden
。
我不知道您究竟打算实现什么目标,但在 X 轴上使用可滚动导航栏似乎不是一个好习惯。也许在您的应用程序中它是有道理的,但您可能会重新考虑这一点。从用户体验的角度来看,这不是最好的方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。