overflow-x：滚动似乎不起作用

我很困惑，为什么这不起作用。我试图在div.queue-wrapper内实现水平滚动，因此div.queue-month如果没有足够的空间（这是他们目前所做的）不会一个接一个掉下来。overflow-x：滚动似乎不起作用

HTML

 <div class="queue-container"> 
      <div class="queue-wrapper clearfix"> 
       <div class="queue-month"> 
        1 
       </div> 
       <div class="queue-month"> 
        2 
       </div> 
       <div class="queue-month"> 
        3 
       </div> 
      </div> 
     </div> <!-- .queue-container -->

CSS

.queue-container { 
    height: 260px; 
    width: 100%; 
    background-color: grey; 
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); 
} 

.queue-wrapper { 
    overflow-x: scroll; 
    background: yellow; 
    width: 100%; 
} 

.queue-month { 
    width: 385px; 
    float: left; 
    background-color: orange; 
}

jsfiddle例如

我使用的是引导3，但它不能在拨弄工作，我认为它有与问题无关。

来源

2015-06-29 Ilja

没有什么可滚动的 –

@MirkoBrombin在那个小提琴中没有变化。但是它不应该滚动，因为.queue-month divs具有固定的宽度，溢出了一个.queue包装器？ – Ilja

对不起，请检查我的答案。 –

您可以使用空白是NOWRAP和使用inline-block的显示器，而不是浮动：

.queue-container { 
 
    height: 260px; 
 
    width: 100%; 
 
    background-color: grey; 
 
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); 
 
} 
 

 
.queue-wrapper { 
 
    overflow-x: auto;/*changed from scroll*/ 
 
    background: yellow; 
 
    width: 100%; 
 
    white-space: nowrap;/*using nowrap*/ 
 
} 
 

 
.queue-month { 
 
    width: 385px; 
 
    display: inline-block;/*instead of float:left;*/ 
 
    background-color: orange; 
 
}

<!-- Dragable queue section --> 
 
     <div class="queue-container"> 
 
      <div class="queue-wrapper clearfix"> 
 
       <div class="queue-month"> 
 
        1 
 
       </div> 
 
       <div class="queue-month"> 
 
        2 
 
       </div> 
 
       <div class="queue-month"> 
 
        3 
 
       </div> 
 
      </div> 
 
     </div> <!-- .queue-container -->

来源

2015-06-29 09:03:47

没有改变：/在小提琴中试过它 – Ilja

没有长文本，所以它会滚动。 –

如果容器的空间超过了空间，那么只有它会滚动。 –

你不给任何滚动，试试这个：

CSS

.queue-container { 
    height: 260px; 
    width: 100%; 
    background-color: grey; 
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); 
} 

.queue-wrapper { 
    background: yellow; 
    width: auto; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

.queue-month { 
    width: 385px; 
    background-color: orange; 
    display: inline-table; 
}

https://jsfiddle.net/g1rLkfjr/2/

来源

2015-06-29 09:07:28

overflow-x：滚动似乎不起作用

回答

相关问题