无法将overflow-x添加到浮动容器中

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

使用内联块而不是浮点数，并防止换行：

#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>

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

#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>

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