我有当前的 CSS:
#inner {
height: 50em;
width : 20em;
overflow: auto;
float : left;
padding :10px;
margin : 20px;
white-space: normal;
}
#outer{
width: 60em;
white-space:nowrap;
border: 13px solid #bed5cd;
overflow-x: auto;
overflow-y: hidden;
}
我的 html 代码如下:
<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
. . . .
</div>
我可以看到水平滚动。但问题是,我不想将 outer.width
硬编码为 60em
。我想将其保留为 auto
。但这以垂直滚动结束。
知道我在哪里犯了错误吗?
最佳答案
在外部 div 上设置 white-space:nowrap
和 overflow:auto
。
在内部 div 上设置 display:inline-block
,并移除 float
。
#outer {
border: 13px solid #bed5cd;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#inner {
display: inline-block;
white-space: normal;
width: 20em;
padding: 10px;
margin: 20px;
}
<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
</div>
关于css - 在 div 内水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40802383/