jquery - 如何使用水平滚动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;
}