废话不多说,直接上源码!!!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div { overflow: hidden; height: 118px; } .box { background: #eee; padding: 10px 0; white-space: nowrap; /*文本不会换行,文本会在在同一行上继续*/ overflow-y: auto; /*可滑动*/ } /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/ .box::-webkit-scrollbar { display: none; } .box1 { width: 49%; margin-left: 3%; height: 100px; background: #fff; display: inline-block; /*行内块元素*/ } </style> </head> <body> <!--外部嵌套层--> <div class="div"> <div class="box"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> </div> </div> </body> </html>
运行效果
转载自博客园 不睡:(https://www.cnblogs.com/bushui/p/11536553.html)