html - 在显示 :table div? 内水平滚动 div

Question

我可以使用以下方法制作水平滚动的 div:

CSS

.scroll {
    width:100%;
    height:100px;
    overflow-x:auto;
    white-space:nowrap;
}

.box {
    width:200px;
    height:100%;
    display:inline-block;
    vertical-align:top;
}

HTML

<div class="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

但是，一旦它嵌套在带有 display:table 的 div 中，.scroll div 就不再滚动，而是拉伸(stretch) .scroll div 以显示所有框。

很确定有一个简单的解决方法，有什么想法吗？

供引用:http://jsbin.com/makigome/29/edit?html,css,output

Answer 1

试试这个 CSS，希望对你有帮助

.table {
  display: block;
  width:100%;
}

.table-cell {
  display:block;
  width:100%;
}

.scroll {
  height:100px;
  width:100%;
  overflow-x:auto;
  border:1px solid red;
  white-space:nowrap;
  margin:10px 0px;
}

.box {
  width:200px;
  height:100%;
  background:orange;
  display:inline-block;
  vertical-align:top;
}