移动端解决左右滑动的纯css布局

àì夳堔傛蜴生んèń 2022-10-16 09:54 240阅读 0赞

移动端解决左右滑动的纯css布局

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>纯css实现左右滑动</title>
  5.     <style type="text/css">
  6.         ul,li{ 
  7.             list-style: none;;
  8.         }
  9.         .slide-box{ 
  10.             margin-top:200px;
  11.             display: -webkit-box;
  12.             overflow-x: auto;
  13.             /*适应苹果*/
  14.             -webkit-overflow-scrolling:touch;
  15.         }
  16.         .slide-item{ 
  17.             width: 300px;
  18.             height: 300px;
  19.             border:1px solid #ccc;
  20.             margin-right: 30px;
  21.             background: pink;
  22.         }
  23.         /*隐藏掉滚动条*/
  24.         .slide-box::-webkit-scrollbar { 
  25.             display: none;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <ul class="slide-box">
  31.     <li class="slide-item"></li>
  32.     <li class="slide-item"></li>
  33.     <li class="slide-item"></li>
  34.     <li class="slide-item"></li>
  35.     <li class="slide-item"></li>
  36. </ul>
  37. </body>
  38. </html>

发表评论

表情：
评论列表 （有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读