Html CSS浮动正在包装

这可能是一个简单的修复方法，但我在网上搜索时没有任何运气

我有一个被抓拍到页面底部的div。该div包含需要并排堆放的按钮项。。。我是通过使用FLOAT来实现的，但实际情况是额外的内容被自然地包装起来，我得到了多行按钮

我需要的是一长排按钮，它们彼此相邻，这样长条是固定的，可以从左向右滚动

请看这里的视觉问题

当前代码保持原样。。。。整个包含div的部分称为“footer”，下面是代码

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

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

单个按钮div称为“footerItems”，下面是代码

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

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

---

在这种情况下，我总是喜欢使用javascript将容器的宽度设置为其子容器的总宽度

---

我不知道如何使用浮动元素。您可以使用内联块而不是浮点

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

为此，您需要添加

空白：nowrap

，以便元素不会中断

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

---

我猜您不想“看到”溢出的元素，所以您也必须将

溢出：隐藏
添加到
#footer
中。否则父div将增长。可选您可以将
hidden
更改为
scroll
或您喜欢的任何内容。
只需设置即可。页脚项目显示为内联块，并在页脚添加空白：nowrap\footer
您也不希望有滚动条吗？请参阅。。。您基本上需要将它们更改为
inline block
元素，然后使用
white spae:nowrap
。。。如果需要滚动条，请更改溢出。。如果绝对必须使用浮动元素，只需包装元素。如果使用
display:inline block
，请注意。这是正常的，符合规范，只是许多开发人员没有预料到。我喜欢你如何使用网站来显示图片^^他们不允许我上传图片，因为我没有足够的信誉点：），所以我必须发挥创意。