如何显示水平滚动条

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

你是在正确的道路上,但你需要和额外的包装,使其工作......

<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 2

上一个问题可能会有所帮助： CSS div element - how to show Horizo​​ntal Scroll Bars only?

因此，不要将当前的 css 更改为：

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

尝试一下，必要时进行调整。