javascript - 使动态创建的 div 水平滚动

Question

我正在尝试制作一组​​我使用 javascript 创建的 div，以继续水平制作。我似乎无法为此找到解决方案。我基本上需要它保持水平添加然后能够水平滚动。目前，它们被创建到浏览器窗口的边缘，然后是下方。

function makeResponseBox() {
    document.getElementById("calculate").onclick = function()
    {
        var responseBox = document.createElement("DIV"); //create <div>
        responseBox.setAttribute("class", "content" );
        document.getElementById('container').appendChild(responseBox);
    }

}//close function (makeResponseBox)

window.onload=makeResponseBox;

body {
	margin: 0 0;
}
#container {
	border: 1px solid blue;

}
#headerbar {
	font-size: 26px;
	color: white;
	padding-left: 10px;
	border: 1px solid blue;
	height: 50px;

}
#sidebar {
	color: black;
	border: 1px solid blue;
	width: 50px;
	float: left;
	height: 100vh;
}
.content {
	width: 200px;
	height: 100vh;
	float: left;
	display: inline;
	border: 1px solid blue;
}

<div id='container'>
<div id='headerbar'>Test Div</div>
<div id='sidebar'> <input type="button" value="Calculate" id="calculate" />
<br /><br />
<br /><br />
</div>
<div class='content'>test1</div>


</div>

Answer 1

在 .container 上使用 white-space:nowrap 来防止内联元素换行。将 .content 和 .sidebar 设置为 display: inline-block; vertical-align: top;，并移除 float 以保持单行:

function makeResponseBox() {
    document.getElementById("calculate").onclick = function() {
      var responseBox = document.createElement("DIV"); //create <div>
      responseBox.setAttribute("class", "content");
      document.getElementById('container').appendChild(responseBox);
    }

  } //close function (makeResponseBox)

window.onload = makeResponseBox;

body {
  margin: 0 0;
}
#container {
  border: 1px solid blue;
  white-space: nowrap; /*** prevent the divs from wrapping to the next lines ***/
  overflow: auto; /** resize the container with the added content **/
    font-size: 0; /** remove spaces between inline-block elements **/
}

#container > * {
  font-size: 16px; /** set font-size to all direct children of #container **/
}

#headerbar {
  font-size: 26px;
  color: white;
  padding-left: 10px;
  border: 1px solid blue;
  height: 50px;
}
#sidebar {
  display: inline-block;
  color: black;
  border: 1px solid blue;
  width: 50px;
  height: 100vh;
  vertical-align: top;
}
.content {
  display: inline-block; /*** this will make the divs stay on the same line, but still have the attributes of a block element ***/
  width: 200px;
  height: 100vh;
  border: 1px solid blue;
  margin: 0 5px 0 0;
  vertical-align: top;
}

<div id="container">
  <div id="headerbar">Test Div</div>
  <div id="sidebar">
    <input type="button" value="Calculate" id="calculate" />
    <br />
    <br />
    <br />
    <br />
  </div>
  <div class="content">test1</div>


</div>