如何让表单中的输入框垂直堆叠排列-html教程-PHP中文网

如何让表单中的输入框垂直堆叠排列

CSS 的 display: block 作用于父容器时，并不会改变其子元素的默认显示行为；要使垂直排列，需显式设置子元素为 display: block，因为默认是 inline-block。

css 的 `display: block` 作用于父容器时，并不会改变其子元素的默认显示行为；要使 `` 垂直排列，需显式设置子元素为 `display: block`，因为 `` 默认是 `inline-block`。

在 Web 开发中，理解 CSS display 属性的作用范围至关重要。许多初学者误以为给父容器（如 .container）设置 display: block 就能“强制”所有子元素竖向堆叠——但事实并非如此。

display 是每个元素自身的属性，它只决定该元素在文档流中的布局行为，不会继承，也不会级联影响子元素。<input> 元素在浏览器中的默认 display 值是 inline-block（而非 inline 或 block），这意味着它们：

可以设置宽高、内边距、外边距；
默认在同一行内水平排列（类似文字）；
不会自动换行，除非遇到容器边界或显式换行符。

因此，即使你将 <form class="container"></form> 设为 display: block，它的两个 <input> 仍保持 inline-block 行为，继续横向并排。

✅ 正确做法是直接控制子元素的显示模式：

jQuery+CSS3 3D立体图片排列布局代码

下载

.container input {
  display: block;
  margin: 0.5rem auto; /* 可选：居中 + 垂直间距 */
  width: 80%;          /* 可选：避免过宽 */
}

同时注意：HTML 中 className 是 React 写法，标准 HTML 应使用 class（示例已修正）：

<div>
  <form class="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 type="submit">Submit</button>
  </form>
</div>

⚠️ 补充说明：

<button></button> 同样默认为 inline-block，若需统一垂直对齐，也建议添加 .container button { display: block; }；
更现代的替代方案包括使用 Flexbox（.container { display: flex; flex-direction: column; align-items: center; }）或 Grid，语义更清晰、控制更灵活；
避免依赖 text-align: center 实现块级元素居中——它仅对行内内容有效；块级子元素需配合 margin: 0 auto 或 Flex/Grid 才能真正水平居中。

掌握 display 的“个体性”与元素的默认渲染行为，是写出可预测、易维护 CSS 的关键基础。