如何固定提交按钮位置并使其与文本域左对齐

当页面缩放或调整窗口大小时，提交按钮发生偏移，根本原因是 `.input-group` 缺少显式宽度和居中约束，导致其子元素（如按钮）随父容器自由伸缩。解决方案是统一控制宽度、使用 `margin: 0 auto` 居中，并移除干扰布局的绝对定位属性。

在响应式表单布局中，按钮“乱跑”是最常见的 css 布局陷阱之一。本例中，问题核心并非按钮本身，而是其父容器 .input-group 的 flex 布局缺乏宽度约束：它默认撑满整个父级 #chatbox 宽度，而 justify-content: space-between 会将 和 <button> 分别推至最左与最右——一旦视口变化，#chatbox 宽度浮动，按钮便随之漂移。</button>

✅ 正确做法是让 .input-group 与上方 #chatboxTranscript 保持一致的宽度和居中逻辑：

• 显式设置 .input-group { width: 31.25em; margin: 0 auto; }，与其上方容器完全对齐；
• 移除所有 position: relative/absolute、top、left、margin 偏移值（如 margin: 0 -2em），这些不仅无效，还会破坏 Flex 的自然流式行为；
• 确保 不设 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 结构保持简洁，无需包裹