css x轴滑动

css代码：

.list_box {
  background: #fff;
  width: 100%;
  height: 80rpx;
  border-bottom: 1px solid #f2f3f5;
}
.list_wrap {
  height: 80rpx;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0 20rpx;
  white-space: nowrap;
}  
.list_ul {
    font-size: 32rpx;
    color: #666;
    white-space: nowrap;
}
.list_ul .list_li {
    box-sizing: border-box;
    display: inline-block;
}
.list_ul .list_li:after {
    content: '|';
    color: '#999' !important;
    margin-left: 8rpx;
    margin-right: 8rpx;
    height: 60rpx;
    display: inline-block;
}

html代码：

<view class="list_box">
<view class="list_wrap">
<view class="list_ul">
  <view class="list_li {{ind==0 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="0">推荐</view>
  <view class="list_li {{ind==1 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="1">推荐1</view>
  <view class="list_li {{ind==2 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="2">推荐2</view>
  <view class="list_li {{ind==3 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="3">推荐3</view>
  <view class="list_li {{ind==4 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="4">推荐4</view>
  <view class="list_li {{ind==5 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="5">推荐5</view>
</view>
</view>
</view>