如何用css实现横向滚动菜单-css教程-PHP中文网

如何用css实现横向滚动菜单

P粉602998670

发布： 2025-10-26 11:51:01

原创

992人浏览过

实现横向滚动菜单需用flex布局使菜单项横向排列，外层容器设置overflow-x: auto允许水平滚动，通过white-space: nowrap防止换行，结合max-width控制宽度，可选隐藏滚动条样式提升视觉效果。

如何用css实现横向滚动菜单

实现横向滚动菜单的关键是让菜单项在一行内排列，并允许内容超出容器时可水平滚动。以下是具体实现方法：

1. 基本结构和样式

使用一个外层容器包裹多个菜单项，确保菜单项横向排列。

示例HTML结构：

<div class="scroll-menu">
  <div class="menu-item">首页</div>
  <div class="menu-item">推荐</div>
  <div class="menu-item">热点</div>
  <div class="menu-item">体育</div>
  <div class="menu-item">财经</div>
  <div class="menu-item">科技</div>
</div>

登录后复制

2. CSS关键样式设置

通过以下CSS实现横向滚动效果：

外层容器：设置固定宽度、隐藏纵向溢出、允许横向滚动
菜单项：使用flex布局或inline-block方式横向排列

对应CSS代码：

.scroll-menu {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}

.menu-item {
  flex: 0 0 auto;
  padding: 10px 15px;
  background: #f0f0f0;
  margin-right: 10px;
  border-radius: 4px;
  text-align: center;
}

登录后复制

说明：flex: 0 0 auto 防止菜单项被压缩，保持原有宽度；overflow-x: auto 在内容超宽时出现横向滚动条。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

立即学习“前端免费学习笔记（深入）”；

3. 去除滚动条（可选）

如果想隐藏滚动条但仍保留滚动功能，可以添加以下样式：

.scroll-menu::-webkit-scrollbar {
  display: none;
}
.scroll-menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

登录后复制

这样在移动端或特定场景下视觉更干净。

基本上就这些，不复杂但容易忽略细节。

以上就是如何用css实现横向滚动菜单的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题