纯CSS实现移动端左右滑动菜单

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .menu{
		    width: 100%;
		    white-space: nowrap;
		    overflow: hidden;
		    overflow-x: scroll;
		    -webkit-backface-visibility: hidden;
		    -webkit-perspective: 1000;
		    -webkit-overflow-scrolling: touch;
		    padding: 10px 10px;
		    background-color: #fff;
        }
         .menu::-webkit-scrollbar {  //隐藏滚动条
		      display: none;
		 }
        .item{
		      margin: 0 10px;
		      display: inline-block;
		      color: #666;
		      text-decoration: none;
		    }
    </style>
</head>
<body>
    <div class="menu">
        <a class="item">菜单</a>
        <a class="item">菜单</a>
        <a class="item">菜单</a>
        <a class="item">菜单</a>
        <a class="item">菜单</a>
        <a class="item">菜单</a>
        <a class="item">菜单</a>
    </div>
</body>
</html>

2019-11-15 22:47:30

返回  我要评论

共有0条评论！

发表评论