运行代码时div标签内元素全部折叠为单行显示是什么原因？

你遇到的现象和块级元素规则不冲突，是两个问题叠加导致的：

1. JS逻辑写错了：你创建的4个input输入框，全部被append到了id为input1的div里，剩下id为input2、input3、input4的三个div从头到尾都是空的，根本没有被插入任何内容，自然不会出现你预期的“每个div放一个输入框、各占一行”的效果。
2. 对块级元素的规则有认知偏差：div设置display:block时确实会独占整行的容器宽度，但这个规则只约束div本身的排版位置，不会强制让div内部的子元素自动换行独占一行。input属于行内替换元素，默认排版规则就是和同级的其他行内元素横向排列在同一行，你把4个input全塞到同一个div容器里，它们自然会在这个div占据的整行宽度里横向排开，和div本身是不是块级元素没有关系。

• 修正JS的元素挂载逻辑，让每个input对应插入到id匹配的div容器中，修改后的JS代码如下：

var input1= document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);

var input2= document.createElement("input");
input2.setAttribute("type", "text");
// 原代码此处错误挂载到了input1节点下
document.getElementById("input2").appendChild(input2);

var input3= document.createElement("input");
input3.setAttribute("type", "text");
// 原代码此处错误挂载到了input1节点下
document.getElementById("input3").appendChild(input3);

var input4= document.createElement("input");
input4.setAttribute("type", "text");
// 原代码此处错误挂载到了input1节点下
document.getElementById("input4").appendChild(input4);

改完之后每个div各包含一个input，四个块级div各自独占一行，输入框就会按垂直方向逐行排列。

• 如果你确实需要把多个input放在同一个div容器中，同时希望每个input单独占一行，需要额外给input设置块级属性，例如在CSS中添加规则：

input {
  display: block;
  margin: 8px auto; /* 配合父级的text-align:center实现块级元素居中 */
}

也可以在每个input后插入<br>换行标签实现换行效果。

你提供的运行截图里四个输入框全部横向排列，正好对应“四个input全被插入第一个div、剩下三个div为空”的错误逻辑表现。

内容的提问来源于stack exchange，提问作者user18014778