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>