overflow-x: scroll;横向滚动

没错，`overflow-x: scroll;` 是用来设置元素的水平滚动条，而不是垂直滚动条。以下是一个示例：

HTML 代码：

<div class="container">
  <div class="content">
    <p>这是一段很长的文本，需要水平滚动才能查看完整内容。</p>
  </div>
</div>

CSS 代码：

.container {
  width: 200px;
  height: 100px;
  overflow-x: scroll; /* 控制水平滚动条 */
}

.content {
  width: 300px;
  height: 80px;
}

在以上示例中，`.container` 元素设置了固定的宽度和高度，并且使用 `overflow-x: scroll;` 来控制水平滚动条。`.content` 元素则设置了一个比 `.container` 元素更宽的宽度，使得其内容超出了 `.container` 元素，从而触发水平滚动条。用户可以通过水平滚动条来查看完整的内容。需要注意的是，由于 `.content` 元素的高度没有超过 `.container` 元素的高度，因此不会触发垂直滚动条。

相关问题

overflow-y: scroll;横向滚动

这个 CSS 样式规则是用来设置一个元素的垂直溢出（也就是内容超出了元素的高度）时如何处理的。`overflow-y: scroll;` 的意思是，当元素的内容高度超出了元素的高度时，显示一个垂直滚动条来让用户滚动查看内容。如果内容没有超出元素的高度，则不显示滚动条。需要注意的是，这个样式规则只会影响垂直滚动条，而不是水平滚动条。如果需要同时控制水平和垂直滚动条，可以使用 `overflow: scroll;`。

overflow-y: scroll;横向滚动示例

抱歉，我之前的回答有误，`overflow-y: scroll;` 是用来设置元素的垂直滚动条，而不是水平滚动条。如果需要水平滚动条可以使用 `overflow-x: scroll;`，若需要同时控制水平和垂直滚动条，则可以使用 `overflow: scroll;`。以下是一个示例：

HTML 代码：

<div class="container">
  <div class="content">
    <p>这是一段很长的文本，需要滚动才能查看完整内容。</p>
  </div>
</div>

CSS 代码：

.container {
  width: 200px;
  height: 100px;
  overflow: scroll; /* 同时控制水平和垂直滚动条 */
}

.content {
  width: 300px;
  height: 200px;
}

在以上示例中，`.container` 元素设置了固定的宽度和高度，并且使用 `overflow: scroll;` 来同时控制水平和垂直滚动条。`.content` 元素则设置了一个比 `.container` 元素更大的宽度和高度，使得其内容超出了 `.container` 元素，从而触发滚动条。用户可以通过滚动条来查看完整的内容。