水平滚动？

Question

我很确定以前见过这个，但我敢肯定有一种方法可以实现水平滚动。

比如说，你有多个DIV，结构如下：

<div class="container">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
</div>

我正在寻找一种方法使它水平对齐，不换行。并且会出现水平滚动条代替垂直滚动条。

通常，如果我使用float:left或display:inline，在div填充足够的水平空间后，它会转到下一行。有没有办法使它在一条直线上对齐，并为此创建一个水平滚动条？

- DucDigital

Answer 1

这应该可以正常工作：

<div class="container">
  <div class="scroller">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
  </div>
</div>

<style>
.container {
  width:200px;
  overflow:scroll;
}
.scroller {
  width:1000px;
}
.content {
  width:200px;
  float:left;
}
</style>

- fredley

---

很抱歉告诉你，如果我增加内容的宽度，它将无法按预期工作，例如：.content { width:300px; float:left; } - Pranay Rana

只要您也增加滚动条的宽度，就可以实现。感谢您的反馈 :) - fredley

如果您不想要垂直滚动条，可以将overflow: scroll;更改为overflow-x: scroll;。 - Brian Ray

Answer 2

在CSS中，实际上不需要设置宽度。设置宽度是不好的，因为它不能让您进行缩放，这意味着每次创建新元素时都必须更改宽度。相反，您应该给.container类一个white-space: nowrap规则，并将其子元素的display设置为inline-block。例如：

.container {
    white-space: nowrap;
}

.container > div {
    display: inline-block;
}

现在，您将不再需要设置宽度来获得此水平滚动功能。

- user1969630