水平滚动Div

Question

我想获得div插槽的水平滚动。以下是我的代码。

槽孔与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>