目前最简单呈现效果最好的纯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
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏 
微信打赏 
