* { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden; /* 超出隐藏滚动条 */ background-color:skyblue; } .box1 .wrap { width:320px; /* 和父盒子宽度一样 */ height:76px; /* 比里层元素高16px 为了隐藏滚动条*/ overflow-x:scroll; /* 定义超出此盒子滚动 */ overflow-y:hidden; } .box1 .wrap ul { width:640px; display:flex; } .box1 .wrap ul li { flex:1; width:60px; height:60px; box-sizing:border-box; }
注:必须在移动端上有效
主要通过css新特性,遮挡住滚动条实现。