我在 1 行中有 3 个 div,显示为 inline-block
。当包含这 3 个 div 的容器 div 最小化时,我希望出现一个滚动条。
不幸的是,在我的例子中,3 个 div 将被放入下一行,而不是显示滚动条:
直到将3个div都放到了另一行,没有其他办法可以最小化容器div后,滚动条才终于出现:
我怎样才能始终将 3 个 div 保持在 1 行中并强制滚动条尽快出现(在需要时),而不将 div 放在其他行中?
#container {
overflow-x: auto;
}
.myclass {
border: 1px solid;
display: inline-block;
width: 300px;
}
<div id="container">
<div id="div1" class="myclass">
abc
</div>
<div id="div2" class="myclass">
def
</div>
<div id="div3" class="myclass">
ghi
</div>
</div>
最佳答案
将它添加到容器中,这样 div 就不会换行。
#container {
overflow-x: auto;
white-space: nowrap;
}
更新 fiddle :https://jsfiddle.net/wea599a1/2/
关于html - 强制出现滚动条,不换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42629310/