移动端html+css实现水平任意滚动（PC端也同理）

来源：互联网发布：新手淘宝客能赚到钱吗编辑：程序博客网时间：2024/06/05 19:06
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta content="IE=edge" http-equiv="X-UA-Compatible">    <meta content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" name="viewport"/>    <meta content="telephone=no" name="format-detection"/>    <title></title>    <style type="text/css" media="screen">        *{            margin: 0;            padding: 0;        }        .wrap_ul{            font-size: 0;            list-style: none;            width: 100px;            height: 120px;        }        .wrap_ul li{            font-size: 20px;            height: 40px;            line-height: 40px;            border: 1px solid #f2f2f2;            box-sizing: border-box;            text-align: center;        }        .wrap{            //这里有些css属性并不是必须的            display: -webkit-box;            white-space: nowrap;            overflow: hidden;            -webkit-backface-visibility: hidden;            -webkit-perspective: 1000;            -webkit-overflow-scrolling: touch;            text-align: justify;            overflow-x: initial;        }    </style></head><body>    <div class="wrap">        <ul class="wrap_ul">            <li>a1</li>            <li>a2</li>            <li>a3</li>        </ul>        <ul class="wrap_ul">            <li>b1</li>            <li>b2</li>            <li>b3</li>        </ul>        <ul class="wrap_ul">            <li>c1</li>            <li>c2</li>            <li>c3</li>        </ul>        <ul class="wrap_ul">            <li>d1</li>            <li>d2</li>            <li>d3</li>        </ul>        <ul class="wrap_ul">            <li>e1</li>            <li>e2</li>            <li>e3</li>        </ul>    </div></body></html>
阅读全文
0 0