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

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

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

1. 基本结构和样式

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

示例HTML结构：

  首页
  推荐
  热点
  体育
  财经
  科技

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 在内容超宽时出现横向滚动条。

3. 去除滚动条（可选）

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

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

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

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