写手机站时我们会遇到像这样的左右滑动的效果,刚开始还误以为是某个js效果,后来才知道,原来是css就可以实现的。
* {margin: 0;padding: 0;} .box {width: 100%; height: 44px; background: rgba(252, 252, 252, .8); border-bottom: 1px solid #ebebeb; line-height: 40px; overflow: hidden; position: relative;} .box2 {width: 100%; overflow: hidden; height: 52px; overflow-x: auto; position: relative;} .box3 {width: 1400px; left: 0; position: absolute; top: 0;} .box3 div {width: 86px; height: 44px; background: #999; float: left; padding: 0 10px;}
<div class="box"> <div class="box2"> <div class="box3"> <div>first</div> <div>second</div> <div>third</div> <div>four</div> <div>five</div> <div>six</div> <div>first</div> <div>second</div> <div>third</div> <div>four</div> <div>five</div> <div>six</div> </div> </div> </div>
时间: 2024-10-17 23:15:18