css只显示横滚动

如果你的网站内容过于长，而且想要整洁简单地呈现，你肯定会想到加上横向滚动效果。这种方法可以让你在不增加页面大小的情况下，让用户轻松地查看所有内容，而不必翻页，尤其是在移动设备上。

.container {
  white-space: Nowrap;
  overflow-x: auto;
}

.item {
  display: inline-block;
}

实现这种效果非常简单，只需要使用CSS属性中的“white-space: Nowrap;”禁止文本在容器中折行，加上“overflow-x: auto;”让容器出现横向滚动条。而在每个滚动区域中，需要给每个 widget 添加“display: inline-block;”使其变为行内块，并将其全部放到容器中即可。

你也可以自定义滚动条样式，比如改变颜色、大小等等，以使其更符合你的网站风格。

在移动端，你可以使用CSS处理文本大小，适应小屏幕，同时使用JavaScript处理滚动相关事件。如果你使用React或者Angular等JavaScript库，那么处理滚动事件也将变得非常容易。

总之，如果你想要实现一个好看、易用的滚动组件，只需要几行CSS，便可轻松实现。快去试试吧！