横向滚动效果

<div class="x-scroll">
    <ul class="wrap">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

scss
.x-scroll{
      width: 1060px;
      margin: 0 auto;
      overflow-x:auto;
      background: black;
      .wrap{
        width: 1600px;
        li{
          display: inline-block;
          width: 300px;
          height:300px;
          margin-right: 10px;
          background: yellow;
        }
      }

    }

css
.x-scroll .wrap {
    width: 1600px; }
.x-scroll .wrap li {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin-right: 10px;
  background: yellow; }

转载于:https://www.cnblogs.com/sakura-sakura/p/6678750.html