Question

我正在尝试为JavaScript网络应用制作一个基本的图形用户界面，让用户可以在任何设备上使用网页应用，而不会花费太多时间和精力使其过于敏感。我想我可以轻松地使用容器div的基本溢出属性，因此用户可以滚动到所需的按钮，而不是完全改变布局以适应不同的屏幕分辨率。

我尝试使用overflow-x设置滚动来设置顶部工具栏（文件，编辑，插入等..），其中包含浮动到左侧的div。出于某种原因，overflow-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。

这会强制元素水平溢出。

JavaScript / CSS overflow-x没有在浮动元素周围拉伸

1 个答案: