如何显示水平滚动条 [英] how to display a horizontal scroll bar

问题描述

我有一个div #items ，它包装了大量 .item 。我想要并排显示这些项目，如果它们超出了页面的宽度，请显示一个水平滚动条。

I have a div #items which wraps around a whole bunch of .item. I want to display the items side by side, and if they exceed the width of the page, display a horizontal scroll bar.

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

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

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

我试过类似的东西，但它不起作用

I tried something like this but it does not work

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

我认为这是实现它的方法，但我无法获得这是为了工作，所以我愿意接受更正和其他方式。

I thought this was the way to do it, but I can't get this to way to work, so I'm open to corrections and other ways also.

推荐答案

你正确的道路，但你需要额外的包装来使它工作...

You are on the right path, but you will need and extra wrapper to make it work...

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

这篇关于如何显示水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！