当页面缩放或调整窗口大小时，提交按钮发生偏移，根本原因是 `.input-group` 缺少显式宽度和居中约束，导致其子元素（如按钮）随父容器自由伸缩。解决方案是统一控制宽度、使用 `margin: 0 auto` 居中，并移除干扰布局的绝对定位属性。
在响应式表单布局中，按钮“乱跑”是最常见的 CSS 布局陷阱之一。本例中，问题核心并非按钮本身，而是其父容器 .input-group 的 Flex 布局缺乏宽度约束：它默认撑满整个父级 #chatbox 宽度，而 justify-content: space-between 会将
✅ 正确做法是让 .input-group 与上方 #chatboxTranscript 保持一致的宽度和居中逻辑：
- 显式设置 .input-group { width: 31.25em; margin: 0 auto; }，与其上方容器完全对齐；
- 移除所有 position: relative/absolute、top、left、margin 偏移值（如 margin: 0 -2em），这些不仅无效，还会破坏 Flex 的自然流式行为；
- 确保
以下是优化后的完整 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 结构保持简洁，无需包裹
