如何在HTML表单中对齐文本框，使其起始位置统一

我完全懂你的需求——要让每个<input>和<textarea>在同一行排列，而且所有文本框的起始位置整整齐齐，就像表格列对齐的效果，但又不想让<textarea>被拉伸改变宽度。下面给你两个实用的解决方案，都能完美实现你的要求：

方案一：CSS Grid布局（推荐，灵活自适应） #

Grid布局天生就适合这种“列对齐”的场景，不需要手动固定宽度，能自动根据内容调整列宽，同时保证所有行的对应元素对齐。

HTML代码 #

<form>
  <!-- 第一行 -->
  <div class="form-row">
    <label for="test1">Test 1</label>
    <input type="text" id="test1">
    <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea>
  </div>
  <!-- 第二行（包含你提到的label for="kom"） -->
  <div class="form-row">
    <label for="kom">Test 2</label>
    <input type="text" id="kom">
    <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea>
  </div>
</form>

CSS代码 #

/* 每一行作为Grid容器 */
.form-row {
  display: grid;
  /* 前两列自适应内容宽度，第三列留给textarea */
  grid-template-columns: auto auto 1fr;
  gap: 12px; /* 元素之间的间距，可根据需求调整 */
  align-items: start; /* 让元素顶部对齐，避免textarea错位 */
  margin-bottom: 15px; /* 行与行之间的间距 */
}

/* 你的textarea固定宽度设置 */
.autofit {
  width: 220px; /* 自定义你想要的宽度 */
  min-height: 70px; /* 可选：设置文本框最小高度 */
  resize: vertical; /* 允许用户垂直调整高度，不改变宽度 */
}

/* 让label和input垂直居中，和textarea顶部更协调 */
label, input {
  align-self: center;
}

方案优势 #

• 不需要预估元素宽度，Grid会自动让所有行的label、input列对齐，即使label文字长短不一也没问题
• 完全控制textarea的宽度，不会被布局拉伸
• 代码简洁，维护成本低

方案二：固定宽度容器（适合内容长度固定的场景） #

如果你的label和input内容长度比较固定，可以给它们包裹一个固定宽度的容器，这样后面的textarea自然就能对齐。

HTML代码 #

<form>
  <div class="form-row">
    <div class="input-wrapper">
      <label for="test1">Test 1</label>
      <input type="text" id="test1">
    </div>
    <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea>
  </div>
  <div class="form-row">
    <div class="input-wrapper">
      <label for="kom">Test 2</label>
      <input type="text" id="kom">
    </div>
    <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea>
  </div>
</form>

CSS代码 #

.form-row {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-bottom: 15px;
}

/* 固定label+input容器的宽度 */
.input-wrapper {
  width: 180px; /* 根据你的内容调整宽度 */
  display: flex;
  gap: 5px;
  align-items: center;
}

.autofit {
  width: 220px; /* 自定义文本框宽度 */
  min-height: 70px;
  resize: vertical;
}

方案优势 #

• 布局逻辑简单直观，适合对布局有精确宽度要求的场景
• 同样能保证textarea起始位置完全对齐

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