纯css实现移动端水平滚动导航

目前最简单呈现效果最好的纯css实现移动端水平滚动导航解决方案。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style> .maincate{width: 100%; height: 50px; line-height: 50px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.1); overflow-x: scroll; overflow-y: hidden; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-overflow-scrolling: touch; text-align: justify; background: #f78361; padding: 0px 5px; box-sizing: border-box; } .maincate a{ color: #fff; text-decoration: none; margin-right: 10px;} .maincate::-webkit-scrollbar{display: none;} </style>
</head>
<body>
<div id="maincate" class="maincate">
    <a href="#">系列1</a>
    <a href="#">系列2</a>
    <a href="#">系列3</a>
    <a href="#">系列4</a>
    <a href="#">系列5</a>
    <a href="#">系列6</a>
    <a href="#">系列7</a>
    <a href="#">系列8</a>
    <a href="#">系列9</a>
    <a href="#">系列10</a>
</div>
<div>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
</div>
</body>
</html>

 

作者:小屋
链接:http://www.rumenwu.com/site/1589.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。