html - 如何显示水平滚动条

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