距离上次更新已经过了 1700 文中部分内容可能已经过时,如有疑问,请在下方留言。

利用display:-webkit-box来实现移动端横向滑动列表
一、第一种方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type="text/css"> .slide-box{ margin-top: 200px; height:35px; //--------------------------------------------------------------- display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; //--------------------------------------------------------------- } .slide-item{ padding:5px 10px; height: 35px; } </style> </head> <body> <div class="slide-box"> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> </div> </body> </html>
|
二、第二种方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type="text/css"> .slide-box{ margin-top: 200px; height:35px; //--------------------------------------------------------------- display: flex; overflow-x: scroll; -webkit-overflow-scrolling:touch; //--------------------------------------------------------------- } .slide-item{ //-----------子元素不收缩------------------------------------------ flex-shrink:0; //--------------------------------------------------------------- padding:5px 10px; height: 35px; } </style> </head> <body> <div class="slide-box"> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> <div class="slide-item">横向滑动</div> </div> </body> </html>
|