css 横向滚动条

/* 设置横向滚动条的样式 */
.container {
  white-space: nowrap; /* 防止内容换行 */
  overflow-x: auto;    /* 当内容超出容器宽度时，显示横向滚动条 */
}

.item {
  display: inline-block; /* 让每个项目在一行内显示 */
  width: 100px;          /* 每个项目的宽度 */
  height: 100px;         /* 每个项目的高度 */
  margin-right: 10px;    /* 项目之间的间距 */
}

<!-- HTML 示例 -->
<div class="container">
  <div class="item" style="background-color: red;"></div>
  <div class="item" style="background-color: blue;"></div>
  <div class="item" style="background-color: green;"></div>
  <div class="item" style="background-color: yellow;"></div>
  <div class="item" style="background-color: purple;"></div>
  <!-- 可以继续添加更多 .item 元素 -->
</div>

解释说明：

• .container 类设置了 white-space: nowrap，确保内部元素不会换行，并且当内容超出容器宽度时，通过 overflow-x: auto 显示横向滚动条。
• .item 类用于定义每个项目的基本样式，使用 display: inline-block 确保它们在同一行内显示。