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就不再滚动而是拉伸.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;
}

Answer 2

使用table和table单元格是不可能的，你可以使用float这样做：

.table {
  float:left;
  width:100%;
}

.table-cell {
  float:left;
  width:100%;
}

.scroll {
  clear:both;
  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;
}

Answer 3

对于有兴趣的人，我通过将position:absolute设置为.scroll div并将其包含在另一个div position:relative中来解决此问题，如下所示：

http://jsbin.com/makigome/39/edit?html,css,output

<div class="table">
    <div class="table-cell">
        <div class="scroll-wrapper">
            <div class="scroll">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
        </div>
    </div>
</div>

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

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

.scroll-wrapper {
    height:100px;
    position:relative;
}

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

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

在显示中水平滚动div：table div？

CSS

HTML

3 个答案: