如何实现两个独立表单中按钮的联动定位与自适应布局

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

.form-wrapper {   position: relative;     /* 创建新的定位上下文 */   display: flex;   flex-direction: column; /* 垂直堆叠子元素 */   gap: 12px;              /* 可选：统一间距，替代冗余 margin */ }  /* 移除表格默认布局干扰，让内容“透出”到父 Flex 容器 */ .form-wrapper form, .form-wrapper table, .form-wrapper tbody, .form-wrapper 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-wr<a >app</a>er 的 Flex 项目，从而真正纳入同一布局体系；</p> <li>若需兼容较老<a >浏览器</a>（如 IE），可改用 <a href="https://seo.sqjnqi.com/tag/float/"><b>Float</b></a> 或<a >绝对定位</a> + JS 监听 textarea 尺寸变化（不推荐，维护成本高）；</li> <li><textarea> 的 rows 属性本身不会触发重排，但若使用 <a href="https://seo.sqjnqi.com/tag/java/"><b>java</b></a>Script 实现自动扩容（如监听 input <a href="https://seo.sqjnqi.com/tag/%e4%ba%8b%e4%bb%b6/"><b>事件</b></a>并设置 scrollHeight），Flex 布局会自动响应高度变化，无需额外干预；

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

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