介绍 & lt; div 类=癱ontent"比;
,,,,,,,& lt; div 类=癱ontent-list"比;
,,,,,,,,,,,& lt; div 类=癷tem",风格=癿argin-right: 10 px;“比;
,,,,,,,,,,,,,,,& lt; div 类=癮mount"比;
,,,,,,,,,,,,,,,,,,,& lt; span> 2 & lt;/span>元
,,,,,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,,,,,& lt; div 类=癴undInfo"比;
,,,,,,,,,,,,,,,,,,,& lt; p 类=皀ame"祝辞XXXXXX
,,,,,,,,,,,,,,,,,,,& lt; p>,满1000元可用& lt;/p>
,,,,,,,,,,,,,,,& lt;/div>,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,& lt; div 类=癷tem",风格=癿argin-right: 10 px;“比;
,,,,,,,,,,,,,,,& lt; div 类=癮mount"比;
,,,,,,,,,,,,,,,,,,,& lt; span> 2 & lt;/span>元
,,,,,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,,,,,& lt; div 类=癴undInfo"比;
,,,,,,,,,,,,,,,,,,,& lt; p 类=皀ame"祝辞XXXXXX
,,,,,,,,,,,,,,,,,,,& lt; p>,满1000元减200 & lt;/p>
,,,,,,,,,,,,,,,& lt;/div>,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,& lt;/div>
,,,,,,,& lt;/div>
,,,& lt;/div> ,,,,,,,.content {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,overflow-x:,滚动,,//,子元素的宽度大于父元素的即可滚动
,,,,,,,,,,,overflow-y:,隐藏;
,,,,,,,,,,,这个特性:,4 px;
,,,,,,,}
,,,,,,,.content: -webkit-scrollbar {
,,,,,,,,,,,显示:没有
,,,,,,,},//,隐藏滚动条
,,,,,,,.content-list {
,,,,,,,,,,,显示:,-webkit-flex;
,,,,,,,,,,,显示:,-ms-flexbox;
,,,,,,,,,,,显示:,flex;
,,,,,,,,,,,:浮动,左,,,//,使其脱离文档流,宽度为所有字元素的和
,,,,,,,,,,,min-width:, 100%;
,,,,,,,}
,,,,,,,.item {
,,,,,,,,,,,宽度:,150 px;
,,,,,,,,,,,身高:,50 px;
,,,,,,,,,,,显示:,-webkit-flex;
,,,,,,,,,,,显示:,-ms-flexbox;
null
null
null
null
null
null
null
这篇文章主要介绍css如何实现元素横向滚动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
分析:
子元素的宽度大于父元素时会出现滚动overflow-x:滚动;为水平滚动,overflow-y:滚动;为垂直滚动,根据需求这里采用水平横向滚动。
html代码:
主要的css代码:
