为何给form设置display:block无法让input垂直排列？

核心原因：display 属性不具备继承性 #

给父元素 .container 设置 display: block，只会改变父元素自身的显示模式，不会自动传递给子元素。这就是为什么你给容器加样式后，input依然水平排列的原因。

为什么 input 默认水平排列？ #

<input> 标签的默认 display 值是 inline-block，这种元素的特性是：

• 可以和其他 inline/inline-block 元素在同一行显示
• 同时支持设置宽高（区别于纯 inline 元素）
  所以默认状态下，两个input会挤在同一行。

给 input 设置 display: block 为什么能实现垂直堆叠？ #

当给 input 设置 display: block 后，元素会变成块级元素，块级元素的核心特性是：

• 独占一行，自动填满父元素的可用宽度
• 前后会自动换行
  因此每个input都会单独占一行，自然就实现了垂直堆叠的效果。

补充：批量处理子元素的简便写法 #

不用逐个给input加样式，也可以通过父元素的后代选择器统一设置：

.container input {
  display: block;
  /* 可额外添加margin优化间距 */
  margin: 8px auto;
}

你的原始代码参考 #

HTML 代码

<div>
  <form className="container" action="">
    <input name="fName" placeholder="First Name" type="text" value={props.fName}/>
    <input name="sName" placeholder="Second Name" type="text" value={props.sName} />
    <button>Submit</button>
  </form>
</div>

你尝试的 CSS 代码

.container{
  text-align: center;
  display: block; 
}

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