使用 Flex 或 Grid 布局结合媒体查询可解决手机端表单输入框排版不整齐问题，1. 采用 Flex 实现垂直堆叠与自动占满，2. 使用 Grid 在不同屏幕尺寸下切换单双列布局，3. 配合媒体查询优化断点与点击区域，4. 重置输入框样式并统一盒模型，确保跨设备对齐一致。
手机端表单输入框排版不整齐，通常是因为固定宽度、浮动布局或未适配不同屏幕尺寸。使用 Flex 或 Grid 布局结合媒体查询，可以有效解决响应式问题，让表单在移动端也能整齐显示。
使用 Flex 布局统一对齐输入框
Flex 布局适合一维排列的表单项，比如垂直排列的输入框或水平排列的姓名+电话组合。
.form-group { display: flex; flex-direction: column; /* 手机端默认垂直堆叠 */ gap: 10px; }.input-row { display: flex; flex-direction: column; gap: 10px; }
.input-row input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
这样每个输入框在小屏下自动占满整行，内容垂直排列，避免错位。
用 Grid 实现复杂表单结构
如果需要两列输入框（如“姓”和“名”），Grid 更灵活。
立即学习“前端免费学习笔记（深入）”；
.input-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }@media (min-width: 768px) { .input-grid { grid-template-columns: 1fr 1fr; / 平板以上两列 / } }
手机端为单列，大屏自动变为双列，结构清晰且无需额外清除浮动。
配合媒体查询优化断点
根据设备宽度调整布局断点，确保视觉一致。
@media (max-width: 480px) { .form-group input { font-size: 16px; /* 提高可点击性 */ height: 44px; /* 符合移动端点击区域建议 */ } }同时避免设置固定像素宽度，使用百分比或 100% 让输入框自适应容器。
统一输入框样式与盒模型
不同浏览器默认样式可能影响对齐，需重置样式。
input { box-sizing: border-box; width: 100%; margin: 0; padding: 10px; border: 1px solid #ddd; }加上 box-sizing: border-box 确保内边距不影响总宽度，避免溢出容器。
基本上就这些。合理使用 Flex/Grid + 媒体查询 + 样式重置，就能让表单在手机端整齐显示，无需依赖 JS 调整。
