html - CSS Float 正在环绕

Question

这可能很容易解决，但我在网上搜索时运气不佳。

我有一个与页面底部对齐的 div。该 div 包含需要并排堆叠的按钮项...我通过使用 FLOAT 来做到这一点，但实际情况是额外的内容被自然包裹并且我得到多行按钮...

我需要的是一长排彼此相邻的按钮，这样长条是固定的并且可以从左到右滚动。

请看这里的视觉问题

当前代码原样......整个包含的 div 称为“页脚”，这是代码

#footer {
  position:fixed;
  width:100%;
  height: 100px;
  background-color:#b6b6b6;
  bottom: 0px;
  overflow-x:scroll;
  padding:10px;
}

单独的按钮 div 称为“footerItems”，这是代码

.footerItems {
   float:left;
   padding-right:10px;
}

Answer 1

我不知道如何处理 float 元素。您可以做的是使用内联 block 而不是 float 。

.footerItems {
   display: inline-block;
   padding-right:10px;
}

为此，您需要添加 white-space: nowrap 这样元素就不会中断。

#footer {
  position:fixed;
  width:100%;
  height: 100px;
  background-color:#b6b6b6;
  bottom: 0px;
  overflow-x:scroll;
  padding:10px;
  white-space: nowrap;
}

我猜你不想“看到”溢出的元素，所以你也必须将 overflow: hidden 添加到 #footer 中。否则 parent-div 会增长。您可以选择将 hidden 更改为 scroll 或您喜欢的任何内容。