页面缩放时提交按钮移位，如何使其与textarea左对齐？

提交按钮在页面缩放时会移位，不符合预期，需要设置为与textarea左对齐。尝试过绝对定位、调整display属性、修改margin均无效，AI生成的CSS也无效果。

问题根源 #

当前代码中，#chatboxInput使用position: relative配合left、top硬编码偏移，提交按钮用负margin强制调整位置，这类固定偏移值无法随页面缩放自适应，导致元素错位。同时.input-group的justify-content: space-between会让子元素分散，破坏左对齐逻辑。

解决方案 #

重构布局，移除所有硬编码的定位偏移，利用Flex布局实现稳定对齐：

1. 修正HTML中textarea的错误闭合标签
2. 移除#chatboxInput的position: relative、top、left属性，让元素正常流式布局
3. 调整.input-group的Flex属性，实现左对齐布局（支持垂直/水平排列）
4. 移除提交按钮的position: relative、top、负margin，恢复正常布局

修正后的HTML #

<div id="chatbox" class="chatbox" data-role="chatbox">
  <div id="chatboxTranscript" class="chatbox-transcript"></div>
  <div class="input-group">
    <!-- <form action="#" onsubmit="handleChatboxFormSubmit(event);"> -->
    <textarea name="chatboxInput" id="chatboxInput"></textarea>
    <button type="submit">Submit</button>
    <!-- </form> -->
  </div>
</div>

修正后的CSS（按钮在textarea下方左对齐） #

#chatboxTranscript {
  width: 31.25em;
  background-color: #36393f;
  color: #fff;
  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;
  width: 31.25em; /* 与上方聊天框宽度保持一致 */
  background-color: #36393f;
  border: 0.15em solid #000;
  border-radius: 0 0 0.3125em 0.3125em;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.5em; /* 替换padding-bottom，让输入内容正常显示 */
  resize: none; /* 可选：禁止textarea缩放 */
}

.input-group {
  display: flex;
  flex-direction: column; /* 垂直排列，按钮在textarea下方 */
  align-items: flex-start; /* 子元素左对齐 */
  gap: 0.5em; /* 元素间间距 */
  width: 31.25em; /* 与聊天框宽度一致，保持整体居中 */
  margin: 0 auto;
}

button[type="submit"] {
  width: 4em;
  height: 3em;
  border: 0.125em solid #000;
  background-color: #36393f;
  border-radius: 0.3125em;
  color: #fff; /* 可选：设置按钮文字颜色，与背景区分 */
  cursor: pointer;
}

可选：按钮与textarea同一行左对齐 #

只需修改.input-group和#chatboxInput的CSS：

.input-group {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 0.5em;
  width: 31.25em;
  margin: 0 auto;
}

#chatboxInput {
  flex: 1; /* 让textarea占满剩余空间 */
  /* 其他属性保持不变 */
}

修改后，页面缩放时按钮会与textarea始终保持左对齐，所有元素的尺寸和位置会自适应页面比例，不会出现移位问题。

内容的提问来源于stack exchange，提问作者grand aneww