css 横向滚动

/* 创建一个横向滚动的容器 */
.scroll-container {
  display: flex;
  overflow-x: auto; /* 允许内容超出容器时横向滚动 */
  white-space: nowrap; /* 防止内容换行 */
}

/* 横向滚动的内容项 */
.item {
  flex: 0 0 auto; /* 确保每个项目不会缩小或拉伸 */
  width: 150px; /* 设置每个项目的宽度 */
  height: 100px; /* 设置每个项目的高度 */
  margin-right: 10px; /* 设置项目之间的间距 */
  background-color: lightblue; /* 设置背景颜色 */
}

<!-- HTML 示例 -->
<div class="scroll-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>

解释说明：

1. scroll-container 类：使用 display: flex 和 overflow-x: auto 来创建一个可以横向滚动的容器。white-space: nowrap 确保内容不会换行。
2. item 类：每个项目设置为固定宽度和高度，并且通过 flex: 0 0 auto 确保它们不会被拉伸或缩小。margin-right 设置项目之间的间距，background-color 设置背景颜色以便更直观地看到效果。

这样就可以实现一个简单的横向滚动效果。