CSS实现移动端横向滑动

html：

<div class="chosen-container">
             <div class="chosen-swiper">
                 <a href="ticketDetail.html">
                     <p class="name">壳牌加油</p>
                     <p class="money">20<span>元</span></p>
                     <p class="explain">20元无门槛优惠券</p>
                 </a>
                 <a href="ticketDetail.html">
                     <p class="name">壳牌加油</p>
                     <p class="money">20<span>元</span></p>
                     <p class="explain">20元无门槛优惠券</p>
                 </a>
                 <a href="ticketDetail.html">
                     <p class="name">壳牌加油</p>
                     <p class="money">20<span>元</span></p>
                     <p class="explain">20元无门槛优惠券</p>
                 </a>
                 <a href="ticketDetail.html">
                     <p class="name">壳牌加油</p>
                     <p class="money">20<span>元</span></p>
                     <p class="explain">20元无门槛优惠券</p>                 
                  </a>
             </div>
         </div>

 

css：

.chosen-container{
    overflow: auto;
}
.chosen-swiper{
    display: -moz-box; /*Firefox*/
    display: -webkit-box; /*Safari,Opera,Chrome*/
    display: box;
}
.chosen-swiper a{
    position: relative;
    display:block!important;
    width: 4.7rem;
    height: 2.5rem;
    background: url('../../img/user/btn_-image.png') no-repeat;
    background-size: cover;
    color: rgb(65,61,62);
    text-decoration: none;
}

.chosen-swiper .name{
    position: absolute;
    top: .36rem;
    right: .54rem;
    font-size: .26rem;
}

.chosen-swiper .money{
    position: absolute;
    top: .88rem;
    left: .52rem;
    font-size: .55rem;
}

.money span{
    font-size: .3rem;
}

.chosen-swiper .explain{
    position: absolute;
    top: 1.74rem;
    left: .58rem;
    font-size: .24rem;
}

 

转载于:https://www.cnblogs.com/ycgo/p/10698262.html