css - Div 的水平滚动

Question

我正在尝试获取 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;
}

Answer 1

伙计，给你……

fiddle :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>