纯css实现移动端水平滚动导航
2年前
超过1093天
温馨提示
本文最后更新于2021年09月23日，已超过1093天没有更新，若内容或图片失效，请留言反馈。
目前最简单呈现效果最好的纯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>
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
