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

当页面缩放或调整窗口大小时，提交按钮发生偏移，根本原因是 `.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（关键修复已加粗标注）：

千问智学

阿里旗下AI教育应用（原夸克学习APP）

下载

#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 结构保持简洁，无需包裹