//css
body{
background-color: #333;
}
.area{
width: 300px;
height: 100px;
margin: 40px auto;
background-color: rgba(250,250,250,0.4);
/*2.再添加white-space:nowrap [会让内联元素]*/
white-space: nowrap;
overflow: scroll;
}
.area .item{
/*1.首先将子元素修改为内联元素*/
display: inline-block;
width: 46px;
height: 96px;
background-color: rgba(230,230,120,0.8);
margin: 2px;
}
/html
<div class="area">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
总结：将子元素变成inline-block元素 父元素设置white-space:no-wrap【子元素会被当成文字一样不会换行，再设置一个overflow:scroll就可以了】