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

我不知道如何使用浮动元素。你可以做的是使用inline-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或您喜欢的任何内容。

Answer 2

只需将.footerItems显示设置为内联块并添加空格：nowrap到页脚#footer

Answer 3

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

Live Demo

var $container = $('div');
var $children = $container.children();
var totalWidth = 0;

$children.each(function (i, child) {
    totalWidth += $(child).outerWidth(true);
});

$container.width(totalWidth);