CSS浮动包装

这可能很容易解决，但我在网上搜索没有任何运气。CSS浮动包装

我有一个div被捕捉到页面的底部。该div包含需要并排堆叠的按钮项目...我通过使用FLOAT来做到这一点，但是会发生什么情况是额外的内容是自然包裹的，而且我得到了多排按钮......

我需要的是相邻的一长串按钮，以便长条是固定的，可以从左向右滚动。

请在这里看到的视觉问题

enter image description here

当前的代码是....包含分区整个被称为 “页脚” 这里是代码

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

来源

2013-12-20 T.J.

难道你不希望这是一个滚动条或者页脚？ – thatidiotguy

见** [这个问题]（http://stackoverflow.com/questions/20603660/how-to-make-a-horizontal-scroll-for-left-floating-children）** ...你基本上需要将它们更改为'inline-block'元素，然后使用'white-spae：nowrap' ...如果您想要滚动条，则更改溢出。如果您绝对必须使用浮动元素，则只需包装元素。 –

如果使用'display：inline-block'，请注意[在元素之间呈现空白]（http://css-tricks.com/fighting-the-space-between-inline-block-elements/）。这是正常的，按照规范，许多开发人员只是出乎意料。 – ajp15243

在这种情况下，我总是倾向于使用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);

来源

2013-12-20 17:07:26 Nate

我不知道如何与浮动元素做到这一点。你可以做的是使用内联块而不是浮动。

.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了。否则，母公司会增长。可选，您可以将hidden更改为scroll或任何您喜欢的。

来源

2013-12-20 17:14:32 Fabic

简单的设置.footerItems显示内联块，并添加空格：NOWRAP到#footer的

来源

2013-12-20 17:18:54 Luca

回答

相关问题