显示div元素内联

Question

我在我的DOM中使用jQuery kinetic插件。我用它来水平滚动一组div。 divs滚动得很好但是，这些项目只有一行！我试图让div显示为逐行显示。下面是HTML元素层次结构。

<div id="item-tab-1">
    <!-- Item List -->
    <div id="item-list-section">
        <div class="item">
             <!-- Item Price -->
             <div class="item-price">
                  <h4>25.00</h4>
             </div>

             <!-- Item Name -->
             <div class="item-name">
                  <h4>DRINK</h4>
             </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="clear"></div>
</div>

“Item”类元素使用jQuery代码重复约100次。因此，在运行时，根据脚本可以有100个元素。以下代码用于激活动态插件。

$('#item-list-section').kinetic({y:false,x:true});

以下是我在元素中使用的CSS。

#item-list-section {
    width: inherit;
    height: 423px;
    overflow: hidden;
    white-space: nowrap;
    float: none;
    display: table;

}

#item-tab-1{
    cursor: move;
}


.item {
    height: 70px;
    width: 80px;
    margin: 15px 0px 0px 20px;
    float: left;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgb(75, 75, 75);
    display: -webkit-inline-box;
}

如何使用CSS完成此操作。我无法逐行显示元素bt保持滚动效果！ Float不在桌面上，因为浮点关键词，kinetic不起作用。

下面是关于它现在如何显示的图像。

Answer 1

你有没有尝试修改这个 - $('#item-list-section').kinetic({y:false,x:true});？

我不知道你的插件，但似乎有一个选项'打开'垂直滚动（或者也可能是垂直布局）。将该行设置为 -

$('#item-list-section').kinetic({y:true,x:false});

修改

修改此 -

#item-list-section {
width: inherit;
height: 423px;
overflow: hidden;
white-space: nowrap;
float: none;
display: table;
}

到此 -

#item-list-section {
width: inherit;
height: 423px;
overflow: scroll;
white-space: nowrap;
float: none;
display: table;
}

小提琴 - http://jsfiddle.net/GHcb3/

Answer 2

将#list-item-section{ overflow: hidden }更改为#list-item-section{ overflow: scroll} 这应该显示水平滚动条。