HTML 横向角色栏

Question

我有一个 html 网格，我想将它放在一个可以移动到一边而无需移动整个页面的容器中，如下所示：

知道我该怎么做吗？

Answer 1

给它一个 CSS class, e.x。 .scroll-x 和我 CSS 文件做：

.scroll-x {
    overflow-x: scroll;
}

它对你有什么帮助吗？

Answer 2

把它放在一个容器里。最好使用 div 元素。然后你需要给容器一个固定的宽度，这样它的宽度就不会缩放（水平滚动条所必需的）。

然后申请：

overflow-x: scroll;

到您的容器，使所有内容水平溢出固定宽度可滚动。

Answer 3

三个步骤：

1. 对容器应用 width。
2. 防止 white-space 换行。
3. 使 overflow-x 水平滚动。

.scroll-horizontal {
  overflow-x: scroll;
  white-space: nowrap;
  width: 300px;
}

<div class="scroll-horizontal">
  This is some content that needs to be scrolled horizontally.
</div>