如何顯示水平滾動條

Question

我有一個div #items，它圍繞着一大堆.item。我想要並排顯示這些項目，如果它們超出了頁面的寬度，請顯示一個水平滾動條。

<div id="somediv"></div> 

<div id="items"> 
    <div class="item"> 
    Item content 
    </div> 
</div> 

<div id="someotherdiv"></div> 

我想是這樣的，但它不工作

#items{ 
    overflow: auto; 
    width:100%; 
    height:200px;  /* this is the height of each item*/ 
} 
.item{ 
    float:left;  
} 

我認爲這是應該做的方式，但我不能得到這個工作方式，所以我開放糾正和其他方式也。

Answer 1

這個前面的問題可能會有所幫助： CSS div element - how to show horizontal scroll bars only?

因此，而不是當前的CSS，將其更改爲：

#items{ 
    overflow-x: scroll; 
    overflow-y: auto; 
    width:100%; 
    height:200px 
} 
.item{ 
    float:left; 
} 

試一下，必要時調整。

Answer 2

您是在正確的道路上，但你需要和額外的包裝，使其工作...

<div id="scrollable"> 
<div id="items"> 
    <div class="item"> 
    Item content 
    </div> 
</div> 
</div> 

，然後你的CSS：

#scrollable { 
     overflow: auto; 
     width:100%; 
     height:200px; 
    } 

    #items { 
    width: 3000px; /* itemWidth x itemCount */ 
    } 

    .item{ 
    float:left;  
    } 

Answer 3

這個問題是關係到/how-to-force-horizontal-scrolling-in-an-html-list-using-css其中animuson解釋浮動元素不能被測量。

#items{ 
overflow: auto; 
white-space: nowrap; 
width:100%; 
height:200px 
} 

.item{ 
display: inline-block; 
} 

而同樣jsfiddle

Answer 4

我寧願你不要爲#items提供寬度。就我而言，.item的數量是動態的，總結它們並不是我的偏好。

#items{ 
      overflow: auto; 
      white-space:nowrap; 
     } 

.item {    
      display:inline; 
     }