div内的水平滚动

Question

我有当前的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。但这以垂直滚动结束。

知道我犯了什么错误吗？

Answer 1

在外部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>

Answer 2

您可以在div

上应用以下css类

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}