h5，移动端浏览器通过css 实现页面，元素横向滚动

横向滚动 在业务中还是比较常见的，比如我们的有些导航就是横向滚动的。
横向滚动其实通过css就是简单的快速实现
核心的代码就是这两行
overflow-x: scroll; 开启滚动
white-space: nowrap; 禁止换行

ul {
            list-style: none;
            overflow-x: scroll;
            white-space: nowrap;
            padding: 15px;
        }
        li {
            width: 40px;
            height: 40px;
            display: inline-block;
            background-color: #f00;
            margin-right: 20px;
        }
        li:last-child {
            margin-right: 0;
        }

<ul>    
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

其实滚动起来 可能还有一个横向的滚动条。 我们也可以尝试把滚动条去掉 但是
有一个谷歌上能去掉的方案

ul::-webkit-scrollbar{
			width: 0;
		}

-webkit- 内核的浏览器上
加上这个在谷歌的浏览器上就没有。

关注我。持续更新 前端知识。