如何使用水平滚动div内容div

Question

我想知道如何向我的div添加水平滚动。

HTML：

<div class="scroll-item">
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
</div>

CSS：

.scroll-item{
    background:#F2F2F2;
    padding: 10px;
    width: 300px;
    overflow-x: scroll;
    border:1px solid red;
}

.item{
    border-left:1px solid #fff;
    border-right:1px solid #ccc;
    height:200px;
    display:inline !important;
    position:relative; 
    float: left;
}

这是我想要实现的目标：

Answer 1

Demo

.scroll-item {
    width: 300px;
    height: 110px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #585453;
    white-space: nowrap;
    float: left;
    padding:10px;
}
.item {
    width: 109px;
    height: 81px;
    display: inline-block;
    border-top: none;
    /*float: left;*/
    position: relative;
    cursor: pointer;
    background:#fff;
}

Answer 2

<强> Demo

CSS

.scroll-item {
    background:#F2F2F2;
    padding: 10px;
    width: 300px;
    overflow-x: auto; /* for horizontal scroll */
    overflow-y: hidden; /* no vertical scroll */
    white-space: nowrap; /* no wraping in second line */
    border:1px solid red;
}
.item {
    border-left:1px solid #fff;
    border-right:1px solid #ccc;
    height:50px;
    position:relative;
    background: url(http://tcrf.net/images/4/47/Placeholder.png);
    width: 50px;
    display: inline-block; /* display in one line */
}

Answer 3

以下是 DEMO 。

.scroll-item{
   background:#F2F2F2;
   padding: 10px;
   width: 300px;
   overflow-x: scroll;
   border:1px solid red;
    white-space: nowrap;
 }

 .item{
   background:url('http://lorempixel.com/50/50/');
   height:200px;
   width:200px;
   display: inline-block;
   padding:0 5px;
   }