制作水平滚动容器

要制作一个水平滚动容器，可以使用CSS的overflow属性和white-space属性来实现。以下是一个示例代码：

HTML代码：

<div class="container">
  <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 class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>

CSS代码：

.container {
  width: 300px;
  overflow-x: scroll;
}

.scroll-container {
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-right: 10px;
}

在上面的示例中，我们使用了一个容器div（class="container"）来包含滚动容器div（class="scroll-container"），并将容器的宽度设置为300px，同时设置overflow-x属性为scroll，这样就可以在容器的水平方向上出现滚动条。

在滚动容器内部，我们使用了white-space属性设置为nowrap，这样内部的子元素（class="item"）就可以水平排列在一行上。我们将子元素的display属性设置为inline-block，使其水平排列，并设置了一个固定的宽度和高度。

这样，当滚动容器的宽度不足以容纳所有子元素时，就会出现水平滚动条，可以通过滚动条来滚动查看所有的子元素。