如何显示水平滚动条答案

【问题标题】：how to display a horizontal scroll bar如何显示水平滚动条
【发布时间】：2011-02-01 01:46:32
【问题描述】：

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

我认为这是解决问题的方法，但我无法让它发挥作用，所以我也愿意接受更正和其他方式。

【问题讨论】：

如果您的容器指定宽度，则不会超过该宽度。你能发布你的 html 和 css（body 和 wrapper div）
@Grillz 我的身体没有任何宽度，但我的包装有width:800px;

标签： html css

【解决方案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;      
  }

【讨论】：

从来没有做过水平滚动条，因为我个人讨厌它们。但这完美无缺。谢谢！

【解决方案2】：

上一个问题可能会有所帮助： 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;
}

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

我希望您不要为#items 提供宽度。就我而言， .item 的数量是动态的，将它们总结起来并不是我的偏好。

#items{
            overflow: auto;
            white-space:nowrap;
        }

.item {             
            display:inline;
        }

【讨论】：