css - 无法将 overflow-x 添加到 float 容器中

Question

我想在页脚添加水平滚动条，当没有足够的空间放置 div 时，它只是下降到下一行。

我加了

overflow-x: auto;
overflow-y: hidden;

但是还是不行。应该怎么解决？

footer {
  background: yellow;
  position: absolute;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  height: 150px;
  font-size: 12px;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}
footer #items {
  display: inline-block;
  height: 150px;
}
footer #items div {
  margin-left: 7px;
  margin-top: 7px;
  float: left;
  height: 134px;
  width: 134px;
  border-style: solid;
  border-color: #752b01;
  border-width: 2px;
  display: inline-block;
}

<footer>
  <div id="items">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</footer>

Answer 1

使用行内 block 而不是 float block ，并防止换行:

#items {
  white-space: nowrap;
}
#items div {
  float: none;
}

footer {
  background: yellow;
  position: absolute;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  height: 150px;
  font-size: 12px;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}
#items {
  display: inline-block;
  height: 150px;
  white-space: nowrap;
}
#items div {
  margin-left: 7px;
  margin-top: 7px;
  height: 134px;
  width: 134px;
  border-style: solid;
  border-color: #752b01;
  border-width: 2px;
  display: inline-block;
}

<footer>
  <div id="items">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</footer>

或者，如果你真的想使用 float ，你需要

#items {
  width: max-content;
}

footer {
  background: yellow;
  position: absolute;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  height: 150px;
  font-size: 12px;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}
#items {
  display: inline-block;
  height: 150px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
#items div {
  margin-left: 7px;
  margin-top: 7px;
  height: 134px;
  width: 134px;
  border-style: solid;
  border-color: #752b01;
  border-width: 2px;
  float: left;
}

<footer>
  <div id="items">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</footer>

但请注意，某些浏览器需要供应商扩展，而其他浏览器尚不支持。