CSS入门困惑：如何让输入框垂直堆叠且Div保持横向排列？

你只需要将两个输入框的display属性从inline-block改为block即可实现需求：

修改后的CSS代码：

.name-bar,
.email-bar {
  border-color: gray;
  border-style: solid;
  /* 改为block，让输入框独占一行，实现垂直堆叠 */
  display: block;
}

.email-bar {
  margin-top: 5px;
}

.div-one,
.div-two {
  border-color: gray;
  border-style: solid;
  width: 200px;
  height: 200px;
  vertical-align: top;
  display: inline-block;
}

原理说明： #

• block类型的元素会独占一行，所以两个输入框会自动垂直堆叠，不会和后续元素在同一行排列。
• 保持.div-one和.div-two的display: inline-block，它们依然会在同一行内横向排列（只要容器宽度足够容纳两个200px的div）。

如果不想完全改成block，也可以给输入框设置width: 100%（前提是父容器有明确宽度），这样inline-block的输入框会占满整行，同样会强制换行实现垂直堆叠：

.name-bar,
.email-bar {
  border-color: gray;
  border-style: solid;
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* 避免边框撑宽元素超出容器 */
}

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