当 container 和 children 的宽度为 auto 时，如何添加水平滚动条？

Question

我的容器具有以下样式：

.timeFrameContainer {
  height: 140px;
  padding-top: 10px;
  overflow-y: hidden;
  overflow-x: scroll;
  width:auto;
}

和里面的children：

.nutrient {
  width: auto;
  height: 120px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
}

我的所有容器都并排显示，直到达到页面的整个宽度。在此之后 children 出现在其他人的下方。

我希望它们都显示在彼此旁边，并在超出页面宽度时显示水平滚动条。我该怎么做？

Answer 1

要防止内联元素换行，请将 white-space: nowrap 分配给容器：

.timeFrameContainer {
  height: 140px;
  padding-top: 10px;
  overflow-y: hidden;
  overflow-x: scroll;
  width:auto;
  white-space: nowrap;
}

.nutrient {
  width: 120px; /** changed for the demo **/
  height: 120px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
  background: red; /** changed for the demo **/
}

<div class="timeFrameContainer">
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
</div>

当 container 和 children 的宽度为 auto 时，如何添加水平滚动条？

How to add horizontal scrollbar when container and children have width auto?

css

overflow