Grid布局表单样式求助：标签左对齐、控件右对齐且宽度统一

问题描述 #

本人HTML/CSS经验有限，刚接触Grid布局，正尝试用其设置表单样式。需求如下：让标签靠左显示，按钮、input、select、textarea靠右显示且宽度保持一致。以下是我的HTML和CSS代码，请求协助解决布局问题。

HTML代码 #

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App Academy HTML/CSS Assessment</title>
    <link href="site.css" rel="stylesheet">
  </head>

  <body>
    <div>
      <form action="/pets" method="post">
        <fieldset>
          <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="pet_name">
          </div>

          <div>
            <label for="type">Type</label>
            <select id="type" name="pet_type">
              <option>Cat</option>
              <option>Dog</option>
              <option>Hamster</option>
              <option>Zebra</option>
              <option>Other</option>
            </select>
          </div>

          <div>
            <label for="bio">Biography</label>
            <textarea id="bio" name="pet_bio"></textarea>
          </div>

          <div>
            <label for="owner-email">Owner's Email</label>
            <input type="email" id="owner-email" name="pet_owner_email">
          </div>

          <div>
            <button type="submit" id="new-pet-submit-button">Create new pet</button>
          </div>

          <div>
            <button type="reset">Reset</button>
          </div>
        </fieldset>
      </form>
    </div>

  </body>

</html>

原CSS代码 #

@media screen and (min-width: 600px) {


  fieldset {
    width: 600px;
    box-sizing: border-box;
  }

  form {
    display: grid;
    grid-template-columns: [form-start] 100px [form-middle] 1fr [form-end];
  }

  label {
    padding-right: 2px;
    grid-column: form-start;
  }

  input {
    grid-column: form-middle;
  }

  button {
    grid-column: form-middle;
  }

  input,
  select,
  button {
    width: calc(100% - 110px);
    grid-column: form-middle;
  }

}

@media screen and (max-width: 599px) {
  form {
    width: auto;
  }
}

问题分析与修复 #

原代码核心问题是Grid布局应用层级错误：把form设为Grid容器，但它的直接子元素是fieldset，而非包含label和控件的div，导致Grid规则无法作用到每一行的表单元素上。同时，textarea未被纳入宽度统一规则，按钮行的对齐也需要调整。

修改后的CSS代码 #

/* 全局重置box-sizing，避免宽度计算偏差 */
* {
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  fieldset {
    width: 600px;
    padding: 1rem;
    border: 1px solid #ccc;
  }

  /* 让每个表单行（div）成为Grid容器，实现一行两列布局 */
  fieldset > div {
    display: grid;
    /* 标签列固定100px，控件列占剩余宽度 */
    grid-template-columns: 100px 1fr;
    /* 列之间留间距 */
    column-gap: 10px;
    /* 垂直居中对齐 */
    align-items: center;
    /* 每行之间留间距 */
    margin-bottom: 1rem;
  }

  /* 标签靠左对齐 */
  label {
    text-align: left;
  }

  /* 统一所有控件的宽度，包括textarea */
  input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
  }

  /* 按钮行没有标签，让按钮占据控件列的位置，靠右对齐 */
  fieldset > div:has(button) {
    /* 让按钮所在行的Grid列合并为1列，然后靠右对齐 */
    grid-template-columns: 1fr;
    justify-content: end;
  }

  /* 按钮宽度统一，和其他控件一致 */
  button {
    width: calc(100% - 110px);
    padding: 0.5rem;
    cursor: pointer;
  }
}

@media screen and (max-width: 599px) {
  fieldset {
    width: 100%;
    padding: 1rem;
  }

  fieldset > div {
    margin-bottom: 1rem;
  }

  label, input, select, textarea, button {
    width: 100%;
    margin-top: 0.5rem;
  }
}

关键修改说明 #

1. Grid容器层级调整：将Grid布局应用到每个表单行的div上，确保每一行的label和控件能分到对应列。
2. 统一控件宽度：把textarea加入宽度规则，设置为100%填充控件列。
3. 按钮行对齐处理：使用:has(button)选择器针对按钮所在行调整Grid布局，让按钮靠右且宽度与其他控件一致。
4. 全局box-sizing重置：避免padding和border影响宽度计算，确保布局精确。
5. 响应式优化：移动端下让所有元素占满宽度，保证适配性。

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