您现在的位置是：首页 > 网站制作 > CSS3|Html5CSS3|Html5

css横向滚动

蒙xs2023-05-09【CSS3|Html5】人已围观

简介css横向滑动代码

重要三要素：

父元素设置 width: 100%，
横向滚动 overflow-x: scroll
父元素不换行 white-space: nowrap
子元素设置为行内块级元素 display: inline-block

html

<view class="couponBox">
                   <view class="couponLi">
                       我是优惠券
                   </view>
                   <view class="couponLi">
                       我是优惠券
                   </view>
                   <view class="couponLi">
                       我是优惠券
                   </view>
                   <view class="couponLi">
                       我是优惠券
                   </view>
               </view>

css

.couponBox{
width: 100%;
       overflow-x: scroll;
       white-space: nowrap;
}
.couponLi{
width: 85%;
           display: inline-block;
           padding: 10rpx;
           margin: 10rpx;
           background: red;
}

Tags：

很赞哦！ ()

上一篇：css画各种形状(clip-path)

下一篇：固定盒子在底部