2元
XXXXXX
满1000元可用
2元
XXXXXX
满1000元减200
Analysis:
Scrolling will occur when the width of the child element is greater than the parent element. Overflow-x: scroll; is horizontal scrolling, and overflow-y: scroll; is vertical scrolling. , horizontal horizontal scrolling is used here according to requirements.
(Learning video sharing:css video tutorial)
html code:
2元XXXXXX
满1000元可用
2元XXXXXX
满1000元减200
Main css code:
.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; }
Related Recommended:CSS tutorial
The above is the detailed content of How to implement horizontal scrolling of elements using css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
