css 当行列横向拖动浏览

138 阅读1分钟
优惠券 满100-50元 立即 领取 A

样式

#ktvIndex .yhjList { padding: 0rpx 15rpx;

white-space: nowrap;文本不会换行,文本会在在同一行上继续,直到遇到
标签为止 white-space: nowrap;

如果溢出框,则应该提供滚动机制。 overflow-y: auto; 如果溢出框,则应该提供滚动机制。

}

这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar — 整个滚动条. #ktvIndex .yhjList::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; }

#ktvIndex .yhjList .yhjWrap { padding: 30rpx 15rpx; display: inline-block; }

#ktvIndex .yhjList .yhjWrap .yhj { width: 326rpx; height: 120rpx; background: #ff3365 no-repear center center; background-size: 326rpx 120rpx; color: #fff; text-align: center; }

#ktvIndex .yhjList .yhjWrap .yhj .left { width: 210rpx;

justify-content属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同 justify-content: center;

align-items弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 align-items: center;

flex-direction容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同 flex-direction: column; font-size: 36rpx; }

#ktvIndex .yhjList .yhjWrap .yhj .left .tips { margin-top: 10rpx; width: 148rpx; height: 26rpx; background-color: #FFD3DE; font-size: 18rpx; color: #f54d49; text-align: center; }

#ktvIndex .yhjList .yhjWrap .yhj .right { flex: 1; align-items: center; }

#ktvIndex .yhjList .yhjWrap .yhj .right .btn { width: 60rpx; height: 60rpx; margin: auto; font-size: 20rpx; color: #f02f3e; border-radius: 12rpx; }