美文网首页
div出现横向滚动条

div出现横向滚动条

作者: 布呐呐aa | 来源:发表于2019-07-08 17:12 被阅读0次

html___________________________________________________________________________________

export default{

data(){

return{

conList:[

{

listImg:require('../assets/img/edu1.png')

},

            {

listImg:require('../assets/img/edu1.png')

},

            {

listImg:require('../assets/img/edu1.png')

}

]

}

}

};

style_________________________________________________________________

.main{

width:100%;

    height:100%;

  }

.container-wrap{

width:100%;

    height:30vw;

    background-color:rgba(0,0,0,0.8);

    white-space:nowrap;

    overflow:hidden;

    overflow-x:scroll; /* 1 */

    -webkit-backface-visibility:hidden;

    -webkit-perspective:1000;

    -webkit-overflow-scrolling:touch; /* 2 */

  }

.container{

width:120%;

    height:30vw;

    overflow:hidden;

    overflow-x:auto;

  }

.list{

width:40%;

    display:inline-block;

    height:30vw;

    color:#fff;

    margin-left:2vw;

    text-align:center;

    line-height:30vw;

  }

/*.container .list:nth-child(1){*/

/*width:80%;*/

/*}*/

/*.container .list:nth-child(2){*/

/*width:20%;*/

/*}*/

/*.container .list:nth-child(3){*/

/*width:20%;*/

/*}*/

  .list img{

width:100%;

    height:30vw;

  }

相关文章

网友评论

      本文标题:div出现横向滚动条

      本文链接:https://www.haomeiwen.com/subject/tceahctx.html