css横向滚动

/* CSS 横向滚动示例 */

/* 容器设置 */
.container {
  width: 300px; /* 设置容器宽度 */
  overflow-x: auto; /* 允许横向滚动 */
  white-space: nowrap; /* 防止内容换行 */
}

/* 内容项设置 */
.item {
  display: inline-block; /* 让每个项目在一行内显示 */
  width: 100px; /* 每个项目的宽度 */
  height: 100px; /* 每个项目的高度 */
  background-color: lightblue; /* 背景颜色 */
  margin-right: 10px; /* 项目之间的间距 */
}

<!-- HTML 示例 -->
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

解释说明：

• .container：设置了固定的宽度，并通过 overflow-x: auto 来允许内容超出容器时可以横向滚动。white-space: nowrap 确保内部的内容不会换行。
• .item：每个项目使用 inline-block 显示方式，确保它们在一行内排列。每个项目的宽度和高度都固定为 100px，并且有 10px 的右边距来分隔各个项目。

这样，当容器内的内容总宽度超过容器本身的宽度时，用户可以通过横向滚动条来查看超出部分的内容。