Javascript 垂直对齐动态创建的按钮

所以我正试图为这些东西制作一个页面，我正处于一个不错的阶段。我遇到了一个障碍，首先，我试图垂直对齐我在文档中使用javascript创建的按钮

我尝试过很多东西，比如投掷展示风格：积木；几乎所有我能做到的地方，但按钮根本不适合我

我可以创建一个功能，将按钮内置到列表中，但由于它们失去了按钮的外观（尽管它们仍然可以正常工作），我决定放弃该解决方案

出于某种原因，JSFIDLE没有显示按钮，但下面是我正在运行并尝试使用的代码

var URLobj={
链接名称1:“https://stackoverflow.com/",
链接名称2:“https://www.google.com",
链接名称3:“https://en.wikipedia.org/"
};
函数exitbutton（）{
var textelement=document.getElementById（“文本”）；
textelement.style.display=“块”；
var buttonelement=document.getElementById（“按钮”）；
buttonelement.style.display=“块”；
var headerelement=document.getElementById（“标题”）；
buttonelement.style.display=“块”；
var iframe=document.getElementById（“iframeID”）；
iframe.src=“#”；
iframe.style.display=“无”；
var exitbutton=document.getElementById（“buttonID”）；
exitbutton.style.display=“无”；
}
函数iframeload（）{
var iframeID=document.getElementById（“iframeID”）；
iFrameID.height=0；
iFrameID.width=0；
}//添加到游戏//parent.iframeload（）；
函数添加（名称、URL）{
var元素=document.createElement（“按钮”）；
//为元素指定不同的属性。
setAttribute（“值”，URL）；
setAttribute（“id”、“gamebutton”）；
element.innerHTML=名称；
element.onclick=function（）{
document.getElementById（“iframeID”）.src=this.getAttribute（“值”）；
document.getElementById（“iframeID”）.width=“95%”；
document.getElementById（“iframeID”）.height=“95%”；
document.getElementById（“iframeID”）.style.display=“block”；
var exitbuttonelement=document.getElementById（“buttonID”）；
exitbuttonelement.style.display=“block”；
var textelement=document.getElementById（“文本”）；
textelement.style.display=“无”；
var buttonelement=document.getElementById（“按钮”）；
buttonelement.style.display=“无”；
var headerelement=document.getElementById（“标题”）；
buttonelement.style.display=“无”；
};
var foo=document.getElementById（“foobar”）；
//在页面中追加元素（在span中）。
foo.appendChild（元素）；
}
window.onload=函数（）{
for（URLobj中的var键）{
if（URLobj.hasOwnProperty（键））{
添加（键，URLobj[key]）
}
}
};
#按钮{
垂直对齐：右对齐；
浮动：对；
显示：块；
}
#福巴{
显示：块；
}
#正文{
垂直对齐：右对齐；
浮动：左；
文本对齐：左对齐；
}
#布特尼德{
浮动：对；
}

您的链接位于此处。


退出链接！
从列表中选择您的链接。

关于：

#foobar{
显示器：flex；
弯曲方向：立柱；
}
您可以直接在
div
标签内部添加标签，无需额外标记
span
在
div
内部（按钮）添加
css
按钮
显示：块

演示


var URLobj={
链接名称1:“https://stackoverflow.com/",
链接名称2:“https://www.google.com",
链接名称3:“https://en.wikipedia.org/"
};
函数exitbutton（）{
var textelement=document.getElementById（“文本”）；
textelement.style.display=“块”；
var buttonelement=document.getElementById（“按钮”）；
buttonelement.style.display=“块”；
var headerelement=document.getElementById（“标题”）；
buttonelement.style.display=“块”；
var iframe=document.getElementById（“iframeID”）；
iframe.src=“#”；
iframe.style.display=“无”；
var exitbutton=document.getElementById（“buttonID”）；
exitbutton.style.display=“无”；
}
函数iframeload（）{
var iframeID=document.getElementById（“iframeID”）；
iFrameID.height=0；
iFrameID.width=0；
}//添加到游戏//parent.iframeload（）；
函数添加（名称、URL）{
var元素=document.createElement（“按钮”）；
//为元素指定不同的属性。
setAttribute（“值”，URL）；
element.innerHTML=名称；
element.onclick=函数（）{
document.getElementById（“iframeID”）.src=this.getAttribute（“值”）；
document.getElementById（“iframeID”）.width=“95%”；
document.getElementById（“iframeID”）.height=“95%”；
document.getElementById（“iframeID”）.style.display=“block”；
var exitbuttonelement=document.getElementById（“buttonID”）；
exitbuttonelement.style.display=“block”；
var textelement=document.getElementById（“文本”）；
textelement.style.display=“无”；
var buttonelement=document.getElementById（“按钮”）；
buttonelement.style.display=“无”；
var headerelement=document.getElementById（“标题”）；
buttonelement.style.display=“无”；
};
var foo=document.getElementById（“按钮”）；
//在页面中追加元素（在span中）。
foo.appendChild（元素）；
}
window.onload=函数（）{
for（URLobj中的var键）{
if（URLobj.hasOwnProperty（键））{
添加（键，URLobj[key]）
}
}
};
#按钮{
垂直对齐：右对齐；
浮动：对；
显示：块；
}
#福巴{
显示：块；
}
#正文{
垂直对齐：右对齐；
浮动：左；
文本对齐：左对齐；
}
#布特尼德{
浮动：对；
}
.btn组按钮{
光标：指针；
显示：块；
}

您的链接位于此处。
退出链接！
从列表中选择您的链接。

display:block
应该已经解决了您的问题

我看到您的代码存在的问题是您将其添加到了错误的位置。您已将样式添加到
中，但未将样式添加到