如何用HTML/CSS实现多列输入组布局？

云上老周

2026-7-20

多列复杂表单实现方案

需求：制作一个包含多输入框的多列表单，每行显示3列输入区域，支持扩展更多行和列，达到类似复杂结账表单的效果。

当前代码问题

当前代码使用多个不同类名的容器（container/container2/container3），宽度设置混乱，且拆分了多个<form>标签，不利于表单整体提交，布局扩展性差。

当前代码

CSS代码

body {
  font-family: Arial;
}

input[type=text],
select {
  padding: 12px 20px;
  margin: 4px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

div.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  overflow: visible;
  float: left;
  margin: 1 1%;
}

div.container2 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  overflow: hidden;
  float: left;
  width: 50%;
  margin: 1 1%;
}

div.container3 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  float: left;
  width: 50%;
  margin: 1 1%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

HTML代码

<div class="row">
  <div class="container">
    <form action="/action_page.php">
      <label for="fname">名字</label>
      <input type="text" id="fname" name="firstname" placeholder="输入你的名字..">

      <label for="lname">姓氏</label>
      <input type="text" id="lname" name="lastname" placeholder="输入你的姓氏..">

      <label for="fname">名字</label>
      <input type="text" id="fname" name="firstname" placeholder="输入你的名字..">

      <label for="lname">姓氏</label>
      <input type="text" id="lname" name="lastname" placeholder="输入你的姓氏..">
    </form>
  </div>

  <div class="container2">
    <form action="/action_page.php">
      <label for="fname">名字</label>
      <input type="text" id="fname" name="firstname" placeholder="输入你的名字..">

      <label for="lname">姓氏</label>
      <input type="text" id="lname" name="lastname" placeholder="输入你的姓氏..">

      <label for="fname">名字</label>
      <input type="text" id="fname" name="firstname" placeholder="输入你的名字..">

      <label for="lname">姓氏</label>
      <input type="text" id="lname" name="lastname" placeholder="输入你的姓氏..">
    </form>
  </div>

  <div class="container3">
    <form action="/action_page.php">
      <label for="fname">名字</label>
      <input type="text" id="fname" name="firstname" placeholder="输入你的名字..">

      <label for="lname">姓氏</label>
      <input type="text" id="lname" name="lastname" placeholder="输入你的姓氏..">

      <label for="fname">名字</label>
      <input type="text" id="fname" name="firstname" placeholder="输入你的名字..">

      <label for="lname">姓氏</label>
      <input type="text" id="lname" name="lastname" placeholder="输入你的姓氏..">
    </form>
  </div>
</div>

优化方案

使用CSS Grid实现灵活的3列布局，统一表单结构，方便扩展更多行和列：

优化后的CSS代码

body {
  font-family: Arial;
  padding: 20px;
}

/* 表单容器，用Grid实现3列均分布局，列间距20px */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 每列的输入区域容器 */
.form-column {
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 15px;
}

/* 输入项小组件，绑定label和input */
.form-group {
  margin-bottom: 15px;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 4px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

/* 表单行容器，和上一行保持间距 */
.form-row {
  margin-bottom: 25px;
}

优化后的HTML代码

<form action="/action_page.php">
  <!-- 第一行3列 -->
  <div class="form-row form-grid">
    <div class="form-column">
      <div class="form-group">
        <label for="fname1">名字</label>
        <input type="text" id="fname1" name="firstname1" placeholder="输入你的名字..">
      </div>
      <div class="form-group">
        <label for="lname1">姓氏</label>
        <input type="text" id="lname1" name="lastname1" placeholder="输入你的姓氏..">
      </div>
      <div class="form-group">
        <label for="email1">邮箱</label>
        <input type="text" id="email1" name="email1" placeholder="输入你的邮箱..">
      </div>
    </div>
    <div class="form-column">
      <div class="form-group">
        <label for="fname2">名字</label>
        <input type="text" id="fname2" name="firstname2" placeholder="输入你的名字..">
      </div>
      <div class="form-group">
        <label for="lname2">姓氏</label>
        <input type="text" id="lname2" name="lastname2" placeholder="输入你的姓氏..">
      </div>
      <div class="form-group">
        <label for="phone2">电话</label>
        <input type="text" id="phone2" name="phone2" placeholder="输入你的电话..">
      </div>
    </div>
    <div class="form-column">
      <div class="form-group">
        <label for="fname3">名字</label>
        <input type="text" id="fname3" name="firstname3" placeholder="输入你的名字..">
      </div>
      <div class="form-group">
        <label for="lname3">姓氏</label>
        <input type="text" id="lname3" name="lastname3" placeholder="输入你的姓氏..">
      </div>
      <div class="form-group">
        <label for="address3">地址</label>
        <input type="text" id="address3" name="address3" placeholder="输入你的地址..">
      </div>
    </div>
  </div>

  <!-- 第二行3列，复制即可快速扩展 -->
  <div class="form-row form-grid">
    <div class="form-column">
      <div class="form-group">
        <label for="fname4">名字</label>
        <input type="text" id="fname4" name="firstname4" placeholder="输入你的名字..">
      </div>
      <div class="form-group">
        <label for="lname4">姓氏</label>
        <input type="text" id="lname4" name="lastname4" placeholder="输入你的姓氏..">
      </div>
    </div>
    <div class="form-column">
      <div class="form-group">
        <label for="fname5">名字</label>
        <input type="text" id="fname5" name="firstname5" placeholder="输入你的名字..">
      </div>
      <div class="form-group">
        <label for="lname5">姓氏</label>
        <input type="text" id="lname5" name="lastname5" placeholder="输入你的姓氏..">
      </div>
    </div>
    <div class="form-column">
      <div class="form-group">
        <label for="fname6">名字</label>
        <input type="text" id="fname6" name="firstname6" placeholder="输入你的名字..">
      </div>
      <div class="form-group">
        <label for="lname6">姓氏</label>
        <input type="text" id="lname6" name="lastname6" placeholder="输入你的姓氏..">
      </div>
    </div>
  </div>

  <!-- 提交按钮 -->
  <div style="margin-top:20px;">
    <input type="submit" value="提交表单" style="padding:12px 30px; background:#4CAF50; color:white; border:none; border-radius:4px; cursor:pointer;">
  </div>
</form>

方案说明

用CSS Grid的repeat(3, 1fr)实现自动均分的3列布局，无需手动计算宽度，扩展性极强；
统一使用.form-column作为列容器，避免多个自定义类名的混乱；
整个表单用一个<form>标签包裹，确保所有输入项能一起提交；
用.form-group封装每个输入项的label和input，结构更清晰，维护更方便；
新增行只需复制.form-row模块即可，快速扩展表单内容。

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

如何用HTML/CSS实现多列输入组布局？

当前代码问题 #

当前代码 #