效果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}
引起原因：
div部分没有在两个div后面清楚浮动，导致浮动溢出
确认方法：在包含两个div的父级处添加border来查看是否包含子级。
解决方法：
<div class="a"></div>
<div class="b"></div>
<div style="clear:both"></div>
其中<div style="clear:both"></div>是清除浮动的意思。
2.宽度或者高度被限制，查看父级的最大高度和宽度是否设置了固定高度而子级的大小超过了最大限制。
解决方法：仔细查看即可。
3.JS影响。
一些JS的确会影响到页面布局问题，但是不经常出现。
确认方法：
去除一下JS后，看看有没有效果，如果没有，说明不是JS 的问题。
这个问题很经典，首页了解一下html.body这两个标签是属于块标签，他会充满整个浏览器窗口，
<html></html>这组标签是无法被定义内联标签和定义宽度高度的，而这个滚动条就是属于HTML标签，所以，浏览器窗口或滚动条与body没关系；
另外，楼上有朋友说得有点复杂，简单的说用CSS 控制你的滚动条出现的位置
html,body { width:100%height:100%overflow:hidden}
div { float:leftwidth:150pxheight:100%background:#6C9overflow-y:scroll}
