您好,欢迎来到九五美食网。
搜索
您的当前位置:首页移动端使用CSS如何实现左右滑动的示例

移动端使用CSS如何实现左右滑动的示例

来源:九五美食网


移动端使用CSS如何实现左右滑动的示例

<!DOCTYPE html>
<html>
<head>
 <title>纯css实现左右滑动</title>
 <style type="text/css">
 ul,li{
 list-style: none;;
 }
 .slide-box{
 margin-top:200px;
 display: -webkit-box;
 overflow-x: auto;
 /*适应苹果*/
 -webkit-overflow-scrolling:touch;
 }
 .slide-item{
 width: 300px;
 height: 300px;
 border:1px solid #ccc;
 margin-right: 30px;
 background: pink;
 }
 /*隐藏掉滚动条*/
 .slide-box::-webkit-scrollbar {
 display: none;
 }
 </style>
</head>
<body>
 <ul class="slide-box">
 <li class="slide-item"></li>
 <li class="slide-item"></li>
 <li class="slide-item"></li>
 <li class="slide-item"></li>
 <li class="slide-item"></li>
 </ul>
</body>
</html>

Copyright © 2019- s95.com.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务