效果GIF图：
第一步 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去参考学习。
这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动
width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。
使用用flex-box布局
#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：
float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高
display:inline-block
即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie
*display:inline
*zoom:1
li { display: inline-block}li { *display: inline*zoom: 1}
利用CSS的inline-blick属性，后边两个是针对低版本IE的HACK，注意这个HACK比较特殊，要像我这样独立地写出来
而且，每个li标签之间不能有空格或换行，要像这样写，否则就会造成莫名其妙的外边距，这算是inline-block里面一个不算BUG的BUG吧。。。
<ul><li>
内容
</li><li>
内容2
</li><li>
内容3
</li></ul>
另外，float会带来很多问题，所以不建议用float
