如何使用CSS和Flexbox对齐标签与输入字段？

我尝试了各种方法，包括参考同类问题的解决方案，但仍无法解决问题。我使用Flexbox的row和column布局，想要创建四行输入字段（最后一行暂为两个），并使每行对应的标签与下方行的标签垂直对齐，目前布局参差不齐。例如，‘Size Meaning:’‘Class:’‘Unit:’这些标签需垂直对齐且起始位置一致。当前效果如图：

当前代码 #

CSS #

p { font-size: 24px; }
li { font-size: 24px; }

.page-wrapper {
    margin: 80px;
    align-content: flex-start;
  }

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }

  .li-label, .li-input {
    display: inline-block;
  }

  .li-label {
    min-width: 80px;
}

HTML #

<div class='page-wrapper'>
    <div class='row'>
      <div class='column'>
        <form>
            <label for="name"> Name:</label>
            <input type="name" id="name" name="name">
        </form>
      </div>
      <div class='column'>
        <form>
            <label for="value">Value:</label>
            <input type="value" id="size_value" name="value">
        </form>
      </div>
      <div class='column'>
        <form>
            <label for="size">Size:</label>
            <input type="size" id="size" name="size">
        </form>
      </div>
      <div class='column'>
        <form>
            <label for="price">Price:</label>
            <input type="price" id="price_at_size" name="price">
        </form>
      </div>
    </div>

      <!-------------------END ROW 1----------------------------------------->

        <div class='row'>
          <div class='column'>
            <form>
                <label for="currency">Currency:</label>
                <input type="currency" id="currency" name="currency">
            </form>
          </div>
          <div class='column'>
            <form>
                <label for="year">Year:</label>
                <input type="year" id="series_name" name="year">
            </form>
          </div>
          <div class='column'>
            <form>
                <label for="class">Class:</label>
                <input type="class" id="class" name="class">
            </form>
          </div>
          <div class='column'>
            <form>
                <label for="usd">USD:</label>
                <input type="usd" id="usd" name="usd">
            </form>
          </div>
        </div>

            <!-------------------END ROW 2----------------------------------------->

            <div class='row'>
                <div class='column'>
                <form>
                    <label for="style">Style:</label>
                    <input type="style" id="style" name="style">
                </form>
                </div>
                <div class='column'>
                <form>
                    <label for="result">Result:</label>
                    <input type="result" id="result" name="result">
                </form>
                </div>
                <div class='column'>
                <form>
                    <label for="unit">Unit:</label>
                    <input type="unit" id="unit" name="unit">
                </form>
                </div>
                <div class='column'>
                <form>
                    <label for="Result1">Result1:</label>
                    <input type="Result1" id="Result1" name="Result1">
                </form>
                </div>
            </div>

                <!-------------------END ROW 3----------------------------------------->

        <div class='row'>
            <div class='column'>
            <form>
                <label for="level">Level:</label>
                <input type="level" id="level" name="level">
            </form>
            </div>
            <div class='column'>
            <form>
                <label for="reference">Reference:</label>
                <input type="reference" id="reference" name="reference">
            </form>
            </div>
        </div>

                <!-------------------END ROW 4----------------------------------------->
        <br>

    <div style="text-align: center">
        <input type="submit" id="submit" name="submit">
    </div>
</div>

解决方案 #

问题根源 #

当前每个column内的表单独立存在，且定义的.li-label类未实际应用到标签上，导致标签宽度随文本长度变化，无法对齐。

修复步骤 #

1. 统一标签样式：给所有label设置固定/最小宽度，并设置右对齐，让输入框自然对齐；
2. 简化DOM结构：整个表单用一个form包裹，无需给每个输入项单独套form；
3. 优化Flex布局：确保column内内容左对齐，统一排列规则；
4. 修正无效输入类型：HTML中不存在type="name"/type="value"等类型，替换为text或对应合理类型（如金额用number）。

修改后的代码 #

CSS

p { font-size: 24px; }
li { font-size: 24px; }

.page-wrapper {
    margin: 80px;
    align-content: flex-start;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 12px; /* 增加行间距提升可读性 */
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    align-items: flex-start; /* 确保内容左对齐 */
}

/* 给所有标签统一样式 */
form label {
    display: inline-block;
    min-width: 100px; /* 根据最长标签调整，确保所有标签宽度一致 */
    text-align: right;
    margin-right: 8px;
}

form input {
    min-width: 120px; /* 统一输入框宽度 */
}

HTML

<div class='page-wrapper'>
    <form>
        <div class='row'>
            <div class='column'>
                <label for="name"> Name:</label>
                <input type="text" id="name" name="name">
            </div>
            <div class='column'>
                <label for="value">Value:</label>
                <input type="text" id="size_value" name="value">
            </div>
            <div class='column'>
                <label for="size">Size:</label>
                <input type="text" id="size" name="size">
            </div>
            <div class='column'>
                <label for="price">Price:</label>
                <input type="number" id="price_at_size" name="price">
            </div>
        </div>

        <div class='row'>
            <div class='column'>
                <label for="currency">Currency:</label>
                <input type="text" id="currency" name="currency">
            </div>
            <div class='column'>
                <label for="year">Year:</label>
                <input type="number" id="series_name" name="year">
            </div>
            <div class='column'>
                <label for="class">Class:</label>
                <input type="text" id="class" name="class">
            </div>
            <div class='column'>
                <label for="usd">USD:</label>
                <input type="number" id="usd" name="usd">
            </div>
        </div>

        <div class='row'>
            <div class='column'>
                <label for="style">Style:</label>
                <input type="text" id="style" name="style">
            </div>
            <div class='column'>
                <label for="result">Result:</label>
                <input type="text" id="result" name="result">
            </div>
            <div class='column'>
                <label for="unit">Unit:</label>
                <input type="text" id="unit" name="unit">
            </div>
            <div class='column'>
                <label for="Result1">Result1:</label>
                <input type="text" id="Result1" name="Result1">
            </div>
        </div>

        <div class='row'>
            <div class='column'>
                <label for="level">Level:</label>
                <input type="text" id="level" name="level">
            </div>
            <div class='column'>
                <label for="reference">Reference:</label>
                <input type="text" id="reference" name="reference">
            </div>
        </div>

        <br>
        <div style="text-align: center">
            <input type="submit" id="submit" name="submit">
        </div>
    </form>
</div>

额外说明 #

• 可根据实际最长标签的长度调整min-width值，确保标签完整显示且宽度统一；
• 输入框类型替换为合理值，既能提升用户体验，也符合HTML规范；
• 行间距的添加让表单更易读，视觉层级更清晰。

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