html – 如何显示水平滚动条

发布时间：2020-12-14 22:34:48 所属栏目：资源来源：网络整理

导读：我有一个div #items,它包含了很多.item.我希望并排显示项目,如果它们超出页面宽度,则显示水平滚动条. div id="somediv"/divdiv id="items" div class="item" Item content /div/divdiv id="someotherdiv"/div 我试过这样的东西,但它不起作用 #items{ overflo

我有一个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;      
}

我认为这是做到这一点的方法,但是我不能让这种方式起作用,所以我也愿意接受修正和其他方式.

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!