开箱即用——div横向布局并出现滚动条

效果图


重要属性：

①横向布局

			父div设置white-space:nowrap （强制不换行）；
			子div设置display:line-block（行内块元素）;

② 出现滚动条

			父div设置高度！！！！
			设置overflow-x:scroll;overflow-y:hidden;

完整代码：

<template>
  <div>
    <div class="page-cards">
        <div class="page-card" v-for="(item, index) in cards" :key="index">
              <div class="card-title">{{item.name}}</div>
              <div class="card-number">{{item.number}}</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
   data(){
       return {
          cards:[
             {name:'卡片一',number:'1'},
             {name:'卡片二',number:'2'},
             {name:'卡片三',number:'3'},
             {name:'卡片四',number:'4'},
             {name:'卡片五',number:'5'},
             {name:'卡片六',number:'6'},
             {name:'卡片七',number:'7'},
             {name:'卡片八',number:'8'},
             {name:'卡片九',number:'9'}
          ]
       }
   }
}
</script>
<style lang="scss" scoped>
.page-cards{
    height:220px;
    width:100%;
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
    .page-card{
        background-color:#fff;
        width:170px;
        margin-right:15px;
        display:inline-block;
    }
}
</style>