如何使用 CSS 创建水平可滚动部分？

有时候，我们需要创建一个宽度超出容器的水平滚动区域，以便在一个不宽的页面上展示较宽的内容。在这个教程中，我们将介绍如何使用 CSS 来创建这样的区域。

HTML 结构

首先，我们需要为我们的滚动区域编写 HTML 代码。在本教程中，我们将使用一个简单的 div，将其宽度设置为 100%，高度设置为 200px，然后在里面放置一些内容：

<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sagittis turpis at egestas. Ut tristique, tortor nec luctus consequat, massa lacus mollis elit, nec sodales metus augue non lacus.</p>
  <p>Aliquam eu accumsan ipsum, in dignissim justo. Donec eu pharetra augue. Sed finibus, libero vel varius ultrices, ligula justo auctor quam, in hendrerit ex odio vitae magna. Suspendisse potenti.</p>
  <p>Etiam congue feugiat accumsan. Quisque posuere consectetur sollicitudin. Sed sodales fringilla arcu, a euismod mi laoreet nec. Fusce pharetra semper dolor, quis cursus arcu placerat at.</p>
</div>

CSS 样式

接下来，我们需要为我们的滚动区域编写 CSS 样式。我们需要将 .scroll-container 设置为 overflow-x: auto;，这将允许我们在容器中滚动水平内容。另外，我们需要将 white-space: nowrap;，这将使文本保持在一行中，不会换行。

.scroll-container {
  width: 100%;
  height: 200px;
  overflow-x: auto;
  white-space: nowrap;
}

完整代码

下面是完整的 HTML 和 CSS 代码：

<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sagittis turpis at egestas. Ut tristique, tortor nec luctus consequat, massa lacus mollis elit, nec sodales metus augue non lacus.</p>
  <p>Aliquam eu accumsan ipsum, in dignissim justo. Donec eu pharetra augue. Sed finibus, libero vel varius ultrices, ligula justo auctor quam, in hendrerit ex odio vitae magna. Suspendisse potenti.</p>
  <p>Etiam congue feugiat accumsan. Quisque posuere consectetur sollicitudin. Sed sodales fringilla arcu, a euismod mi laoreet nec. Fusce pharetra semper dolor, quis cursus arcu placerat at.</p>
</div>

.scroll-container {
  width: 100%;
  height: 200px;
  overflow-x: auto;
  white-space: nowrap;
}

现在，我们已经知道如何使用 CSS 创建水平可滚动部分了。