当 textarea 动态伸缩时，使用 `position: relative` 硬编码偏移会导致兄弟按钮脱离文档流、无法同步移动；正确方案是通过语义化容器 + css flex 布局重构视觉顺序，使按钮成为同一布局上下文中的可响应元素。
在 Web 表单开发中，常遇到这样一种典型场景：两个按钮分别位于不同
0
0
如何实现两个独立表单中按钮的联动定位与自适应布局
霞舞
发布时间：2026-01-20 22:21:20
|483人浏览过
|来源于php中文网
原创
对应 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 是本方案核心：它让
相关文章
如何修复导航栏文字换行与Logo裁剪问题
跳过导航链接（Skip to main content）的标准实现写法
如何修复导航栏中的文字换行与图片裁剪问题
HTML按钮间空白区域意外触发链接行为的根源与解决方案
如何修复导航栏文字换行与图片裁剪问题
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
js获取数组长度的方法
在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。
557
2023.06.20
js刷新当前页面
js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容
374
2023.07.04
js四舍五入
js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容
754
2023.07.04
js删除节点的方法
js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
477
2023.09.01
JavaScript转义字符
JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。
434
2023.09.04
js生成随机数的方法
js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。
1011
2023.09.04
如何启用JavaScript
JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。
658
2023.09.12
Js中Symbol类详解
javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。
553
2023.09.20
Java JVM 原理与性能调优实战
本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。
19
2026.01.20
热门下载
网站特效
/
网站源码
/
网站素材
/
前端模板
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章
