JavaScript/CSS overflow-x沒有在浮動元素周圍伸展

Question

我正在嘗試爲JavaScript Web應用製作一個基本的圖形用戶界面，它可以讓用戶在任何設備上使用網絡應用程序，而不需要太多的時間和精力來製作它過於敏感。我想我可以很容易地使用基本溢流屬性div容器，所以用戶可以滾動到期望的按鈕，而不是完全改變佈局對於不同的屏幕分辨率。

我試圖使頂部的工具欄（文件，編輯，插入等）與溢出-X設置滾動，持有向左浮動的div。出於某種原因，溢出-X不做任何事情，所以一些按鈕被隱藏。爲什麼是這樣？

jsFiddle

// STYLE WINDOW 
document.body.style.margin = "0px"; 
document.body.style.padding = "0px"; 
document.body.style.backgroundColor = "#66666A"; 
document.body.style.color = "#0099AA"; 
document.body.style.fontFamily = "calibri, sans-serif"; 

function getScrollbarWidth() 
{var o = document.createElement('div');o.style.overflowY = "scroll";o.style.visibility = "none";var i = document.createElement('div');o.appendChild(i);document.body.appendChild(o);var r = o.offsetWidth-i.offsetWidth;o.parentNode.removeChild(o);return(r);} 

function getScrollbarHeight() 
{var o = document.createElement('div');o.style.overflowX = "scroll";o.style.visibility = "none";document.body.appendChild(o);var r = o.offsetHeight;o.parentNode.removeChild(o);return(r);} 

// CREATE EDITOR TOOLBAR 
toolbar = document.createElement('div'); 
toolbar.style.position = "fixed"; 
toolbar.style.top = "0px"; 
toolbar.style.left = "0px"; 
toolbar.style.width = "100%"; 
toolbar.style.height = 32+getScrollbarHeight()+"px"; 
toolbar.style.overflowX = "scroll"; 
toolbar.style.overflowY = "hidden"; 
toolbar.style.backgroundColor = "#33333A"; 
toolbar.buttons = {}; 
toolbar.addButton = function(buttonName){ 
    var newButton = document.createElement('div'); 
    newButton.style.width = "128px"; 
    newButton.style.height = "16px"; 
    newButton.style.float = "left"; 
    newButton.style.paddingTop = "8px"; 
    newButton.style.paddingBottom = "8px"; 
    newButton.style.textAlign = "center"; 
    newButton.style.fontSize = "15px"; 
    newButton.style.color = ";DD8800"; 
    newButton.innerHTML = buttonName; 
    this.buttons[buttonName] = newButton; 
    this.appendChild(newButton); 
} 

toolbar.addButton("File"); 
toolbar.addButton("Edit"); 
toolbar.addButton("Insert"); 
toolbar.addButton("Settings"); 
toolbar.addButton("Share"); 
toolbar.addButton("Help"); 

// CREATE EDITOR WINDOW SELECTOR 
windowSelector = document.createElement('div'); 
windowSelector.style.position = "fixed"; 
windowSelector.style.top = 32+getScrollbarHeight()+"px"; 
windowSelector.style.left = "0px"; 
windowSelector.style.bottom = "0px"; 
windowSelector.style.width = 128+getScrollbarWidth()+"px"; 
windowSelector.style.overflowY = "scroll"; 
windowSelector.style.backgroundColor = "#33333A"; 
windowSelector.buttons = {}; 
windowSelector.addButton = function(buttonName,imageURL){ 
    this.buttons[buttonName] = document.createElement('div'); 
    this.buttons[buttonName].style.width = "128px"; 
    this.buttons[buttonName].style.height = "64px"; 
    this.buttons[buttonName].style.backgroundColor = "#22222A"; 
    this.buttons[buttonName].style.borderTop = "1px solid #115588"; 

    var buttonImage = document.createElement('div'); 
    buttonImage.style.width = "32px"; 
    buttonImage.style.height = "32px"; 
    buttonImage.style.margin = "8px"; 
    buttonImage.style.marginTop = "16px"; 
    buttonImage.style.marginBottom = "16px"; 
    buttonImage.style.float = "left"; 
    buttonImage.style.backgroundImage = "url('"+imageURL+"')"; 
    buttonImage.style.backgroundSize = "contain"; 
    buttonImage.style.backgroundPosition = "center center"; 
    this.buttons[buttonName].appendChild(buttonImage); 

    var buttonTitle = document.createElement('div'); 
    buttonTitle.style.width = "72px"; 
    buttonTitle.style.height = "16px"; 
    buttonTitle.style.paddingTop = "24px"; 
    buttonTitle.style.paddingBottom = "24px"; 
    buttonTitle.style.paddingLeft = "8px"; 
    buttonTitle.style.float = "left"; 
    buttonTitle.style.color = "#77BBDD"; 
    buttonTitle.style.fontSize = "14px"; 
    buttonTitle.innerHTML = buttonName; 
    this.buttons[buttonName].appendChild(buttonTitle); 

    this.appendChild(this.buttons[buttonName]); 
} 

windowSelector.addButton("Sprites",""); 
windowSelector.addButton("Objects",""); 
windowSelector.addButton("Scripts",""); 
windowSelector.addButton("Rooms",""); 
windowSelector.addButton("Backgrounds",""); 
windowSelector.addButton("Sounds",""); 
windowSelector.addButton("Paths",""); 
windowSelector.addButton("Timelines",""); 
windowSelector.addButton("Constants",""); 

// CREATE APPLICATION SCRIPT 
application = document.createElement('script'); 

document.body.appendChild(application); 
document.body.appendChild(toolbar); 
document.body.appendChild(windowSelector); 

Answer 1

元素只會溢出水平，如果他們沒有其他選擇。通常，這是一件好事，但在某些情況下，...是啊。

float旨意包裹。相反，嘗試在容器上使用display:inline-block上的項目，並white-space:nowrap。

這將強制元素水平溢出。