如何显示水平滚动条

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; 
     }