Question

所以我试图为一些东西制作一个页面，而且我处于一个不错的阶段。在所有事情上，我试图垂直对齐我在文档中使用javascript创建的按钮。

我尝试了很多东西，例如投掷展示风格：块;几乎我能到的地方，但按钮只是拒绝与我合作。

我能够创建一个将按钮构建到列表中的功能，但是因为它们失去了按钮的外观（虽然它们仍然像他们必须的那样运行）但我决定废弃解决方案。

由于某些原因，JSFiddle没有显示按钮，但这里是我正在运行并尝试使用的代码。

＆＃13;

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])
    }
  }
};

＆＃13;

#buttons {
  vertical-align: right;
  float: right;
  display: block;
}

#foobar {
  display: block;
}

#text {
  vertical-align: right;
  float: left;
  text-align: left;
}

#buttonID {
  float: right;
}

＆＃13;

<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">&nbsp;</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>

＆＃13;

当我在本地运行它时，我确实看到了我需要看的所有内容，但我的按钮是水平对齐的。按钮div的位置现在并不重要，我想弄清楚的是我如何通过使用javascript，html或css将I按钮垂直对齐存储。

Answer 1

怎么样：

#foobar {
  display: flex;
  flex-direction: column; 
}

Answer 2

您可以直接在div内加span标记div（按钮）并添加css按钮display: block;。

<强>样本

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.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("buttons");

  //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;
}

.btn-group button {
    cursor: pointer;
    display: block;
}

<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 class="btn-group" id="buttons"></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>

Answer 3

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

我在您的代码中看到的问题是您将其添加到了错误的位置。您已将样式添加到<div id="buttons">，但未添加到div中的单个<button>项目

将样式添加到这些元素将提供您想要的结果

垂直对齐动态创建的按钮

3 个答案: