通过移除 position: absolute 下冗余的 right: 0 并调整定位策略，可使表单呈现紧凑的方形边框，避免因 100% 宽度导致内容错行或容器异常拉伸。
通过移除 `position: absolute` 下冗余的 `right: 0` 并调整定位策略，可使表单呈现紧凑的方形边框，避免因 100% 宽度导致内容错行或容器异常拉伸。
在实际开发中，为 <form> 添加“方形边框”（即视觉上规整、贴合内容的矩形边框）常被误解为必须设置 width: 100% + position: absolute。但正如示例所示，当同时声明 left: 0 和 right: 0 时，浏览器会强制将绝对定位元素拉伸至父容器宽度——这不仅使边框失去“包裹内容”的语义，还易引发输入框换行、间距失控等问题。
✅ 正确做法是：让边框真正“包裹表单内容”，而非撑满视口。推荐两种稳健方案：
方案一：移除 right: 0，保留 position: absolute（适用于需精确定位的场景）
.main-form {
position: absolute;
border: 5px solid #e74c3c; /* 使用更柔和的红色 */
left: 0;
/* 删除 right: 0 和 width: 100% */
padding: 20px; /* 增加内边距提升可读性 */
box-sizing: border-box; /* 确保边框和内边距不增加总尺寸 */
}此时表单宽度由内部内容自然决定，边框紧密包裹所有子元素，形成真正的“方形容器”。
方案二（更推荐）：改用 position: static + 标准流布局
.main-form {
border: 5px solid #e74c3c;
padding: 20px;
margin: 0 auto;
max-width: 600px; /* 控制最大宽度，防止单行过宽 */
box-sizing: border-box;
}配合 HTML 中移除 position: absolute，表单回归文档流，自动居中且响应式友好，输入框默认水平排列（需配合 display: flex 或 inline-block 进一步优化布局）。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- 避免在表单上滥用 position: absolute —— 它脱离文档流，易破坏无障碍访问与响应式行为；
- 若需多列输入框并排，请使用 display: flex 或 CSS Grid，而非依赖 <br> 强制换行；
- 始终设置 box-sizing: border-box，确保 padding 和 border 不影响整体尺寸计算。
总结：方形边框的本质是“内容驱动的容器边界”，而非“视口拉伸的视觉假象”。优先选择语义清晰、可维护性强的标准流方案，再辅以现代布局技术（Flexbox/Grid），才能兼顾样式精准性与工程健壮性。
