如何制作水平滚动的导航栏？

Question

I'm trying to make the ul in the nav bar horizontally scroll-able when the screen width get shrinked.当屏幕宽度缩小时，我试图使导航栏中的 ul 水平滚动。

I have looked at answers to some of the similar questions and implemented solutions that seemed to work in my case.我查看了一些类似问题的答案，并实施了似乎对我有用的解决方案。

However, the ul and its contents somehow break out of the nav and stay on the next line under the nav.然而，ul 及其内容不知何故脱离了导航并停留在导航下的下一行。 Also,还，

I thought that setting position: fixed; overflow-y: hidden;我认为设置position: fixed; overflow-y: hidden; position: fixed; overflow-y: hidden; to the ul would solve the problem.到 ul 就可以解决问题了。 But, instead, the left side of it covers the button placed at the left corner of the nav.但是，相反，它的左侧覆盖了位于导航左角的按钮。

Can anyone help me out??谁能帮我吗？？

<!--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;
    }
    
}

Answer 1

So, I've tried your code on CodePen, and seems that the only thing that keeps your code from working is the position: fixed rule on the ul element inside the media query.所以，我已经在 CodePen 上尝试了你的代码，似乎唯一让你的代码无法工作的是position: fixed媒体查询中ul元素的固定规则。

In my opinion since you intend to keep all of your items inside the header on the X-Axis, the overflow-y: hidden is not needed at all.在我看来，由于您打算将所有项目保留在 X 轴上的 header 内，因此根本不需要overflow-y: hidden 。

I have no idea what exactly you are planning to achieve, but using a scrollable navbar on the X-Axis doesn't seem to be a good practice.我不知道您到底打算实现什么，但在 X 轴上使用可滚动导航栏似乎不是一个好习惯。 Maybe in your application it makes sense, but you might reconsider this.也许在您的应用程序中它是有意义的，但您可能会重新考虑这一点。 From a UX point of view, it is not the best approach.从用户体验的角度来看，这不是最好的方法。

如何制作水平滚动的导航栏？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-29 13:04:50

如何制作水平滚动的导航栏？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-29 13:04:50

解决方案1
0 已采纳 2020-12-29 13:04:50