网页中元素默认是纵向排列的，我们可以通过 css 属性将容器内子元素实现横向排列，超出隐藏，并可以横向滚动。
基础结构如下:
- <div class="scroll-box">
- <div class="item">1</div>
- <div class="item">2</div>
- <div class="item">3</div>
- <div class="item">4</div>
- <div class="item">5</div>
- .
- .
- .
- </div>
item 可以根据实际需要增加更多
横向浮动，隐藏，滑动相关 css 如下:
- .item {
- width: 100px;
- height: 60px;
- line-height: 60px;
- white-space: nowrap;
- display: inline-block;
- }
- .scroll-box {
- text-align: center;
- white-space: nowrap;
- overflow-x: scroll;
- overflow-y: hidden;
- }
如果需要隐藏滚动条，通过控制伪类，增加以下 css 即可
- .scroll-box::-webkit-scrollbar {
- display: none;
- }
