css横向滚动条代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 横向滚动条示例</title>
<style>
.scroll-container {
  width: 300px; /* 容器宽度 */
  overflow-x: auto; /* 添加横向滚动条 */
  white-space: nowrap; /* 防止内容换行 */
  border: 1px solid #ccc; /* 边框样式 */
}

.scroll-item {
  display: inline-block; /* 内容块显示为行内块 */
  width: 100px; /* 内容块宽度 */
  height: 100px;
  margin-right: 10px; /* 内容块之间的间距 */
  background-color: #f0f0f0; /* 内容块背景颜色 */
}
</style>
</head>
<body>

<div class="scroll-container">
  <div class="scroll-item"></div>
  <div class="scroll-item"></div>
  <div class="scroll-item"></div>
  <!-- 更多内容块 -->
</div>

</body>
</html>