所以我正在尝试为内容制作一个页面，而且我正处于一个不错的阶段。我遇到了所有事情的障碍，试图垂直对齐我在文档中使用 javascript 创建的按钮。
我试过很多东西，比如 throwing display style: block;几乎所有我能做的地方，但按钮根本无法与我一起工作。
我能够创建一个将按钮内置到列表中的功能，但是因为它们失去了按钮的外观(尽管它们仍然像它们必须的那样起作用)我决定放弃这个解决方案。
出于某种原因，JSFiddle 没有显示按钮，但这是我正在运行并尝试使用的代码。
https://jsfiddle.net/jets29sy/8/
var URLobj = {
linkname1: "https://stackoverflow.com/",
linkname2: "https://www.google.com",
linkname3: "https://en.wikipedia.org/"
};
function exitbutton() {
var textelement = document.getElementById("text");
textelement.style.display = "block";
var buttonelement = document.getElementById("buttons");
buttonelement.style.display = "block";
var headerelement = document.getElementById("header");
buttonelement.style.display = "block";
var iframe = document.getElementById("iframeID");
iframe.src = "#";
iframe.style.display = "none";
var exitbutton = document.getElementById("buttonID");
exitbutton.style.display = "none";
}
function iframeLoaded() {
var iframeID = document.getElementById("iframeID");
iFrameID.height = 0;
iFrameID.width = 0;
} // add to game // parent.iframeLoaded();
function add(name, URL) {
var element = document.createElement("button");
//Assign different attributes to the element.
element.setAttribute("value", URL);
element.setAttribute("id", "gamebutton");
element.innerHTML = name;
element.onclick = function() {
document.getElementById("iframeID").src = this.getAttribute("value");
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("text");
textelement.style.display = "none";
var buttonelement = document.getElementById("buttons");
buttonelement.style.display = "none";
var headerelement = document.getElementById("header");
buttonelement.style.display = "none";
};
var foo = document.getElementById("foobar");
//Append the element in page (in span).
foo.appendChild(element);
}
window.onload = function() {
for (var key in URLobj) {
if (URLobj.hasOwnProperty(key)) {
add(key, URLobj[key])
}
}
};#buttons {
vertical-align: right;
float: right;
display: block;
}
#foobar {
display: block;
}
#text {
vertical-align: right;
float: left;
text-align: left;
}
#buttonID {
float: right;
}<head scroll="no">
<link rel="stylesheet" href="page.css">
<script type="text/javascript" src="page.js"></script>
</head>
<body scroll="no">
<div id="header" , style="block">
<h2>Your links are located here.</h2>
</div>
<div id="buttons" , style="display: block">
<span id="foobar" style="block"> </span><br/>
</div>
<div id="exit"><button type="button" id="buttonID" style="display: none" onclick=exitbutton()>Exit link!</button></div>
<div class="frame_div" , background-color="blue">
<iframe id="iframeID" , width="0" , height="0" , align="middle"></iframe>
</div>
<div class="text" , id="text" , style="block">
<tr>
<th>Choose your link from the list.<br></th>
</tr>
</div>
</body>当我在本地运行它时，我确实看到了我需要看到的所有内容，但我的按钮却水平对齐。按钮 div 的位置现在不是那么重要，我想弄清楚的是如何通过使用 javascript、html 或 css 在我存储它们的位置垂直对齐按钮。
最佳答案
关于:
#foobar {
display: flex;
flex-direction: column;
}
关于javascript - 垂直对齐动态创建的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49920669/