17370845950

当 textarea 动态伸缩时，使用 `position: relative` 硬编码偏移会导致兄弟按钮脱离文档流、无法同步移动；正确方案是通过语义化容器 + css flex 布局重构视觉顺序，使按钮成为同一布局上下文中的可响应元素。

在 Web 表单开发中，常遇到这样一种典型场景：两个按钮分别位于不同

对应 CSS 如下（关键点已注释）：

.form-wrapper {
  position: relative;     /* 创建新的定位上下文 */
  display: flex;
  flex-direction: column; /* 垂直堆叠子元素 */
  gap: 12px;              /* 可选：统一间距，替代冗余 margin */
}

/* 移除表格默认布局干扰，让内容“透出”到父 Flex 容器 */
.form-wrapper form,
.form-wrapper table,
.form-wrapper tbody,
.form-wr
apper tr,
.form-wrapper td {
  display: contents; /* 关键！使表单/表格结构不参与布局，仅保留子元素 */
}

/* 按钮统一为块级、自适应宽度、垂直居中对齐 */
.form-wrapper input[type="submit"] {
  display: block;
  width: fit-content;
  margin: 0 auto; /* 水平居中 */
}

/* 调整 Approve 按钮视觉顺序：让它显示在 Reject 按钮之后（即紧邻 textarea 下方） */
#ApprBtn {
  order: 3; /* 默认 order: 0；RejectBtn 在 DOM 中靠后，order 默认更高，也可显式设为 2 */
}

? 注意事项与进阶建议：

• display: contents 是本方案核心：它让
  、 等容器“隐形”，其子元素（如 、）直接成为 .form-wrapper 的 Flex 项目，从而真正纳入同一布局体系；<li>若需兼容较老浏览器（如 IE），可改用 float 或绝对定位 + JS 监听 textarea 尺寸变化（不推荐，维护成本高）；</li> <li><textarea> 的 rows 属性本身不会触发重排，但若使用 JavaScript 实现自动扩容（如监听 input 事件并设置 scrollHeight），Flex 布局会自动响应高度变化，无需额外干预；

  为增强可访问性，建议为按钮添加 aria-label，并确保 有明确的 <label> 关联。</label>

  通过该方案，无论 如何伸缩，“Approve”与“Reject”按钮都将始终保持相对位置稳定，且整体结构语义清晰、响应式友好、易于维护。