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

CSS浮動包裝

回答

相關問題