如何实现区域内横向滚动条?

//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就可以了】