实现思路:
父元素
overflow:auto;
white-space:nowarp; /*不换行*/
子元素
display:inline-block; /*行内元素,所以才需要父元素的white-space设置*/
html
<div class="d">
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
</div>
css
.d{
height: 100px;
overflow: auto;
white-space:nowrap;
}
.s1{
width: 100px;
height: 100px;
background: #ccc;
display: inline-block;
}