css中元素横向放置,css实现元素横向滚动的方法

分析：

子元素的宽度大于父元素时会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，根据需求这里采用水平横向滚动。

html代码：

2元

XXXXXX

满1000元可用

2元

XXXXXX

满1000元减200

主要的CSS代码：

.content {

width: 100%;

overflow-x: scroll; // 子元素的宽度大于父元素的即可滚动

overflow-y: hidden;

border-radius: 4px;

}

.content::-webkit-scrollbar {

display:none

} // 隐藏滚动条

.content-list{

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

float: left; // 使其脱离文档流 宽度为所有字元素的和

min-width: 100%;

}

.item {

width: 150px;

height: 50px;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

flex: 3;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

padding: 0 10px;

}