Question

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

Slots是宽度为200像素的容器，它将显示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

你在这里交配......

小提琴：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>

Div的水平滚动

1 个答案: