规范的HTML自适应多栏表单排版代码-html教程-PHP中文网

最稳方案是表单容器设 display: flex；关键将「label + input」作为整体单元，label 设固定宽，input 统一高度，星号用 * 并加 margin；二维对齐优先 grid；ie11 回退 table；响应式断点设 768px 切单列。

规范的html自适应多栏表单排版代码

用 `display: flex` 实现表单项左右对齐最稳

直接给表单容器设 display: flex，比浮动、inline-block 或老式 table 更可靠，不会因清除浮动失败或 vertical-align 失效导致错位。

关键不是让每个 input 单独 flex，而是把「label + input」当一个整体单元来 flex 排列：

父容器（如 .form-row）设 display: flex; align-items: center; gap: 12px;
每个 label 设固定宽度（如 width: 100px;）或 flex: 0 0 100px;，避免文字过长撑开布局
input、select、textarea 统一设 height: 36px; 或 line-height: 36px;，否则和 label 垂直不对齐
必填星号用 <span class="required">*</span> 包裹，别用空格；加 margin-left: 4px; 控制间距

多组严格对齐时优先用 `display: grid`

当需要姓名左/年龄右、邮箱左/电话右这类二维约束时，grid 比 flex 更可控，尤其列数固定为 2 的场景。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

写法示例：

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
}

每组表单项（label + input）必须包裹在独立的 div 里，作为 grid 的一个子项
DOM 顺序必须和视觉顺序一致——不能靠 grid-column 调换位置，否则 screen reader 会读错
IE11 不支持 grid，若需兼容，回退到 display: table 方案（见下一条）

兼容 IE11 必须用 `display: table` 回退方案

不是“能用就行”，而是“不这样写就塌缩”：IE8–IE10 下，table-cell 内容不显式设宽就会收缩到最小，且嵌套 flex 或 grid 会直接破坏布局。

外层容器设 display: table; width: 100%;
每组表单项设 display: table-row;
label 和 input 分别设 display: table-cell; vertical-align: middle;
label 必须有显式宽度（如 width: 120px;），不能靠 min-width 或 flex
所有 table-cell 元素必须同级，中间不能插 fieldset 或额外 div，否则 IE 自动修复后结构错乱

响应式断点设在 `768px` 以下切单列

小屏下双栏强行并排，会导致字体过小、点击区域拥挤、输入框被截断——这不是样式问题，是交互失效的前兆。

用 @media (max-width: 768px) 切换布局，不是 480px 或 600px
flex 方案加 flex-direction: column;，grid 方案改 grid-template-columns: 1fr;
单列时，label 改为块级显示（display: block;），input 宽度设为 100%，但留出 box-sizing: border-box;
避免在媒体查询里重写整套样式，只覆盖必要属性，减少维护负担