HTML 在 div 内部水平滚动内容

在本文中，我们将介绍如何在 HTML 中使内容在一个 div 元素内水平滚动。

阅读更多：HTML 教程

什么是 div 元素

div 元素是 HTML 中一个非常常见的容器元素，用于将内容组织在一起。它是一个块级元素，可以用来创建包含其他元素的区域。

下面是一个 div 元素的基本用法示例：

<div>
  这是一个 div 元素内的内容。
</div>

我们可以通过添加样式来为 div 元素设定宽度、高度、背景颜色等属性。

水平滚动 div 内容的方法

如果 div 元素内的内容超出了其宽度，就会出现水平滚动条。下面是几种实现水平滚动 div 内容的方法：

使用 CSS 的 overflow-x 属性

通过设置 div 元素的 overflow-x 属性为 auto，可以实现水平滚动。当内容超出了 div 元素的宽度时，会显示一个水平滚动条。

<style>
  .scrollable-div {
    overflow-x: auto;
    white-space: nowrap;
    width: 300px;
  }
</style>

<div class="scrollable-div">
  这是一个超级长的文本内容。在一个 div 内部水平滚动。
</div>

在上面的示例中，我们通过给 div 元素添加一个类名 .scrollable-div，并设置其宽度为 300px，使其在过长的内容时出现水平滚动条。

使用 CSS 的 flexbox 布局

另一种常见的方法是使用 CSS 的 flexbox 布局模型。通过将内容包裹在一个具有 overflow-x: scroll 属性的 div 元素内，可以实现水平滚动。

<style>
  .scrollable-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 300px;
  }
</style>

<div class="scrollable-container">
  <div>这是一个水平滚动容器。</div>
  <div>这是另一个水平滚动容器。</div>
  <div>还有一个水平滚动容器。</div>
  <div>最后一个水平滚动容器。</div>
</div>

在上面的示例中，我们通过给一个 div 容器添加一个类名 .scrollable-container，并设置其宽度为 300px，使内容在超出容器宽度时出现水平滚动条。

使用 table 布局

在一些特定的场景下，使用 table 布局也可以实现水平滚动。通过将内容放置在一个具有 table、table-row 和 table-cell 属性的结构中，可以实现水平滚动。

<style>
  .scrollable-table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    width: 300px;
  }

  .scrollable-table .table-row {
    display: table-row;
  }

  .scrollable-table .table-cell {
    display: table-cell;
  }
</style>

<div class="scrollable-table">
  <div class="table-row">
    <div class="table-cell">这是一个水平滚动单元格。</div>
    <div class="table-cell">这是另一个水平滚动单元格。</div>
    <div class="table-cell">还有一个水平滚动单元格。</div>
    <div class="table-cell">最后一个水平滚动单元格。</div>
  </div>
</div>

在上面的示例中，我们通过使用一个 div 容器 .scrollable-table 和一系列具有 .table-row 和 .table-cell 类名的嵌套 div 实现了水平滚动。设置容器的宽度为 300px，使其在内容超出时出现水平滚动条。