手机端因为布局很窄，如果刚好菜单很多的情况下，我们就可以把菜单左侧左右滑动的效果，来节省空间，大致效果如下图
具体效果可以参考今日头条，菜单可以左右滑动。有些花里胡哨的代码会用上JS，其实这种只需要CSS就能搞定，下面看代码。
HTML代码
<div> <a href="https://www.11px.cn/moban/ecms/">帝国cms模板</a> <a href="https://www.11px.cn/moban/dedecms/">织梦cms模板</a> <a href="https://www.11px.cn/moban/discuz/">discuz模板</a> <a href="https://www.11px.cn/moban/ecshop/">ecshop模板</a> <a href="https://www.11px.cn/moban/phpcms/">phpcms模板</a> <a href="https://www.11px.cn/moban/wordpress/">wordpress模板</a> <a href="https://www.11px.cn/moban/maccms/">苹果cms模板</a> <a href="https://www.11px.cn/moban/seacms/">海洋cms模板</a> <a href="https://www.11px.cn/moban/feifeicms/">飞飞cms模板</a> <a href="https://www.11px.cn/moban/html/">html模板</a> </div>
CSS代码
div{
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
a{
display:inline-block
}我们主要看CSS，
overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap;
加滚动条，并且隐藏搞不懂，最后内容强制不换行。
display:inline-block
这段事让块状横向排列，完工。
本文转载自:精准像素：11px.cn ，感谢作者分享实用知识
