我可以使用以下方法制作水平滚动的 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 以显示所有框。
很确定有一个简单的解决方法,有什么想法吗?
最佳答案
试试这个 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;
}
关于html - 在显示 :table div? 内水平滚动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23376182/