通过css在网页中实现容器内元素横向滚动

网页中元素默认是纵向排列的，我们可以通过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;
}