方案一：

第一步 ul 中的css设置 <ul id = "list"> </ul>
#list { overflow-x: auto; //设置x轴可滑动 list-style: none;//去掉li上的小点 white-space:nowrap;//元素不换行 width: auto;(宽度) }
第二步 li中的css设置 <li class = "item">
.item { margin-left: 20px; //每个li设置间距为20px display: inline-block; //让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }

先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。

overflow-x
这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动

visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。 （和正常的overflow:hidden效果一样）
scroll 裁剪内容 - 提供滚动机制。 （不管超过屏幕 一直有滚动条）
auto 如果溢出框，则应该提供滚动机制。（只有超出屏幕 才会有滚动条）
no-display 如果内容不适合内容框，则删除整个框。 这两个还没有用过
no-content 如果内容不适合内容框，则隐藏整个内容。
width
width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。

auto 默认值。浏览器可计算出实际的宽度。
length 使用 px、cm 等单位定义宽度。 (用的比较多)
% 定义基于包含块（父元素）宽度的百分比宽度。(用的比较多)
inherit 规定应该从父元素继承 width 属性的值。
方案二：

使用用flex-box布局
#list { displey:-webkit-flex; display: flex; -webkit-flex-flow:row nowrap; //设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrap; overflow-x: auto; list-style: none;}

作者：土豆萝卜君
链接：https://www.jianshu.com/p/8e27b663b70f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。