当页面缩放或调整窗口大小时，提交按钮发生偏移，根本原因是 `.input-group` 缺少显式宽度和居中约束，导致其子元素（如按钮）随父容器自由伸缩。解决方案是统一控制宽度、使用 `margin: 0 auto` 居中，并移除干扰布局的绝对定位属性。
在响应式表单布局中，按钮“乱跑”是最常见的 CSS 布局陷阱之一。本例中，问题核心并非按钮本身，而是其父容器 .input-group 的 Flex 布局缺乏宽度约束：它默认撑满整个父级 #chatbox 宽度，而 justify-content: space-between 会将 <textarea> 和 <button> 分别推至最左与最右——一旦视口变化，#chatbox 宽度浮动，按钮便随之漂移。
✅ 正确做法是让 .input-group 与上方 #chatboxTranscript 保持一致的宽度和居中逻辑：
- 显式设置 .input-group { width: 31.25em; margin: 0 auto; }，与其上方容器完全对齐；
- 移除所有 position: relative/absolute、top、left、margin 偏移值（如 margin: 0 -2em），这些不仅无效，还会破坏 Flex 的自然流式行为；
- 确保 <textarea> 不设 width: 37.3em（该值远超父容器），否则会触发横向溢出或 Flex 换行异常；应改用 flex: 1 占满可用空间，同时添加 min-width: 0 防止内容撑开。
以下是优化后的完整 CSS（关键修复已加粗标注）：
#chatboxTranscript {
width: 31.25em;
background-color: #36393f;
color: #fff;
display: flex;
border: 0.125em solid #000;
border-radius: 0.3125em 0.3125em 0 0;
box-sizing: border-box;
margin: 0 auto;
height: 12.5em;
}
#chatboxInput {
height: 3.35em;
background-color: #36393f;
border: 0.15em solid #000;
border-radius: 0 0 0.3125em 0.3125em;
padding-bottom: 1.5em;
box-sizing: border-box;
margin: 0 auto;
/* 移除 width: 37.3em —— 改为由 Flex 自动分配 */
}
.input-group {
display: flex;
justify-content: space-between;
width: 31.25em; /* ✅ 关键：与 transcript 宽度严格一致 */
margin: 0 auto; /* ✅ 关键：水平居中，不随父容器拉伸 */
gap: 0.5em; /* 可选：增加按钮与 textarea 间距，提升可读性 */
}
#chatboxInput,
button[type="submit"] {
flex-shrink: 0; /* 防止缩放时被压缩 */
}
button[type="submit"] {
width: 4em;
height: 3em;
border: 0.125em solid #000;
background-color: #36393f;
border-radius: 0.3125em;
/* 移除 top / margin 等定位干扰项 */
}HTML 结构保持简洁，无需包裹 <form>（除非需语义化或提交逻辑），且确保 <textarea> 正确闭合：
<div id="chatbox" class="chatbox" data-role="chatbox">
<div id="chatboxTranscript" class="chatbox-transcript"></div>
<div class="input-group">
<textarea name="chatboxInput" id="chatboxInput" placeholder="Type your message..."></textarea>
<button type="submit">Submit</button>
</div>
</div>? 注意事项：
- 避免混合使用 width + flex 控制同一元素尺寸（如给 <textarea> 设定固定宽又放在 display: flex 容器中），易引发冲突；
- 所有涉及 em 的尺寸建议搭配 font-size 统一基准，或改用 rem 提升可维护性；
- 若需真正响应式（适配移动端），可在媒体查询中将 31.25em 替换为 100% 或 min(31.25em, 90vw)。
通过约束父容器宽度与居中方式，而非“强行钉住”子元素，即可实现稳定、可预测、符合现代 CSS 布局规范的对齐效果。
