css实现横向滚动

首先添加一段html代码：

    <div class="scroll">
      <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 class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">X</div>
      <div class="item">XI</div>
    </div>

在没有样式情况下这段代码显示效果如下：

给item添加样式

      .item {
        width: 100px;
        height: 50px;
        background-color: aqua;
        border-right: 1px solid;
        white-space: nowrap;
        display: inline-block;
      }

下面添加样式支持滚动

      .scroll {
        text-align: center;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
      }

效果如下: