css - 带有动态元素的水平滚动

Question

我有方形元素，它们将连续出现在屏幕扩展上。

这些元素是动态出现的，然后我有 2 个，因为我有 50 个。根据屏幕的大小和我拥有的元素数量，我会溢出。发生这种情况时，我想显示一个水平滚动条。

关注here我试过的 fiddle

代码:

HTML

<div class="wrap-poltrona">
    <div class="poltrona"></div>
    <div class="poltrona"></div>
    ...
    <div class="poltrona"></div>
    <div class="poltrona"></div>
</div>

CSS

.wrap-poltrona{
}
.poltrona{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    margin: 5px;
}

Answer 1

使用 inline-block 而不是 float，在 CSS 中添加:

.wrap-poltrona{
  white-space:nowrap;
  overflow:auto;
}
.poltrona{
  display:inline-block;
}

演示 http://jsfiddle.net/M5X3a/2/