如何使用纯css实现移动端列表横向滑动

╰+哭是因爲堅強的太久メ 2022-12-20 11:13 257阅读 0赞

170bc037b1bf2890074dae6d1910aa8a.png

利用display:-webkit-box来实现移动端横向滑动列表

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>横向滑动</title>
  5.     <style type="text/css">
  6.         .slide-box{
  7.             margin-top: 200px;
  8.             height:35px;
  9.             //---------------------------------------------------------------
  10.             display: -webkit-box;
  11.             overflow-x: scroll;
  12.             -webkit-overflow-scrolling:touch;
  13.             //---------------------------------------------------------------
  14.         }
  15.         .slide-item{
  16.             padding:5px 10px;
  17.             height: 35px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="slide-box">
  23.         <div class="slide-item">横向滑动</div>
  24.         <div class="slide-item">横向滑动</div>
  25.         <div class="slide-item">横向滑动</div>
  26.         <div class="slide-item">横向滑动</div>
  27.         <div class="slide-item">横向滑动</div>
  28.     </div>
  29. </body>
  30. </html>

发表评论

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

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

相关阅读

    相关 移动端滑动

    前言 移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。 小插件

    以你之姓@以你之姓@/ 0 赞/ 404 阅读