overflow-x: scroll;横向滑动(移动端使用详解)
css3 , ie8以上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>横向滑动overflow-x: scroll</title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } .box1{ width: 100px; height: 60px; overflow: hidden;/* 超出隐藏滚动条 */ background-color: skyblue; } .box1 .wrap{ width: 100px;/* 和父盒子宽度一样 */ height: 76px;/* 比里层元素高16px 为了隐藏滚动条*/ overflow-x: scroll;/* 定义超出此盒子滚动 */ overflow-y: hidden; } .box1 .wrap ul{ width: 300px; display: flex; } .box1 .wrap ul li{ flex: 1; width: 60px; height: 60px; box-sizing: border-box; } </style> </head> <body> <div class="box1"> <div class="wrap"> <ul> <li>1移动端</li> <li>2可滑动</li> <li>3ie8以上</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html>