css横向滚动做法 |火狐 checkbox css

//方法一：使用overflow属性
.scroll {
width: 500px;
height: 200px;
overflow-x: auto;
white-space: nowrap;
}
//方法二：使用transform属性
.scroll {
width: 500px;
height: 200px;
overflow: hidden;
}
.scroll-inner {
display: flex;
flex-wrap: nowrap;
transform: translateX(0);
transition: all 0.3s ease-out;
}
//方法三：使用inline-block属性
.scroll {
width: 500px;
height: 200px;
white-space: nowrap;
font-size: 0;
}
.scroll-inner {
display: inline-block;
vertical-align: top;
font-size: 16px;
}

以上三种方法都可以实现横向滚动效果，可以根据具体的情况选择其中一种实现。其中第一种方法使用overflow属性，可以让内容在固定宽度的区域内隐藏超出部分并呈现滚动条，适用于大多数情况。第二种方法使用transform属性，可以让内容自由滑动，自然且流畅，但需要注意浏览器兼容性。第三种方法使用inline-block属性，可以让内容在一行显示，但需要将文字大小设置为0，并且需要注意布局和垂直对齐。