Div 的水平滚动答案

【问题标题】：horizontal scroll for DivDiv 的水平滚动
【发布时间】：2013-11-28 07:06:56
【问题描述】：

我正在尝试获取 div 插槽的水平滚动。下面是我的代码。

Slots 是宽度为 200 px 的容器，将显示 2 个插槽，

每个宽度为 100 像素的插槽。

我想在插槽数超过 2 时显示水平滚动。

请帮帮我。

<div class="slots">
    <div class="slot">
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
    </div>
    <div class="slot">
        <span class="slot-busy"> </span>
        <span class="slot-busy"> </span>
        <span class="slot-busy"> </span>
        <span class="slot-busy"> </span>
    </div>
    <div class="slot">
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
    </div>
</div>

.slots{
     width: 200px;
     overflow-y: hidden;
     display: inline-table;
     height: 25px;
     overflow: auto;
}

.slot{
     width:100px;
     height:25px;
     display: inline-block;
}

.slot-free, .slot-busy {
     width: 25px;
     height: 25px;
     display: inline-block;
     margin: 0;
     padding: 0;
}

【问题讨论】：

所以scroll 类应该出现在在线和滚动条中当超过 2 个scroll 类存在时？

标签： css html dom horizontal-scrolling

【解决方案1】：

给你，伙计...

小提琴：http://jsfiddle.net/logintomyk/6K6f8/1/

CSS

   .slots{
        width: 200px;
        height: 50px;
        overflow-x:scroll;
        white-space: nowrap;
    }

   .slot{
        height:25px;
        width:100px;
        display: inline-block;
        cursor:pointer;
        margin-left:20px;
      }

   .slot-free, .slot-busy {
         width: 25px;
         height: 25px;
         display: inline-block;
         margin: 0;
         padding: 0;
    }

HTML

<div class="slots">
            <div class="slot">
                <span class="slot-free"> span </span>
                <span class="slot-free">span </span>
                <span class="slot-free">span </span>
                <span class="slot-free"> ggvg</span>
            </div>
            <div class="slot">
                <span class="slot-busy">span </span>
                <span class="slot-busy">span </span>
                <span class="slot-busy">span </span>
                <span class="slot-busy">dfffff </span>
            </div>
            <div class="slot">
                <span class="slot-free">span </span>
                <span class="slot-free">span </span>
                <span class="slot-free">span </span>
                <span class="slot-free"> sdfdfds</span>
            </div>
</div>

【讨论】：