html - 在 CSS 网格中对齐表单标签？

Question

我正在学习如何使用带有表单的网格，并坚持让我的表单在其中正常工作。大部分都可以，直到我到达复选框，标签才不对齐。我希望那些标签位于复选框的右侧，这与左侧所有其他内容的标签不同。相反，标签会被撞到下一行。

这是我的代码:

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
  font-family: "Lato", sans-serif;
  color: #fafafa;
}

form {
  display: grid;
  grid-template-columns: 1fr 1em 2fr;
  border-radius: 12px;
  padding: 1em;
  background: #009688;
  margin: 2rem auto 0 auto;
  max-width: 600px;
}

form input {
  background: #fff;
  border: 1px solid #9c9c9c;
}

form button {
  background: lightgrey;
  padding: 0.7em;
  width: 100%;
  border: 0;
}

form button:hover {
  background: gold;
}

label {
  padding: 0.5em 0.5em 0.5em 0;
}

input {
  padding: 0.7em;
  margin-bottom: 0.5rem;
}

input:focus {
  outline: 3px solid gold;
}

@media (min-width: 400px) {
  form {
    grid-gap: 16px;
  }
  label {
    text-align: right;
    grid-column: 1 / 3;
  }
  input[type="checkbox"] {
    grid-column: 3 / 3;
    justify-self: start;
    margin: 0;
  }
  input,
  button {
    grid-column: 3 / 4;
  }
  textarea+label {
    align-self: start;
  }
}

<form class="form1" action="">
  <label for="firstName" class="first-name">First Name</label>
  <input id="firstName" type="text">

  <label for="lastName" class="last-name">Last Name</label>
  <input id="lastName" type="text">

  <label for="email">Email</label>
  <input id="email" type="text">
  <label for="experience">Experience</label>
  <select id="experience" name="experience">
    <option value="1">Less than a year</option>
    <option value="2">1 - 2 years</option>
    <option value="3">3 - 5 years</option>
    <option value="5">5 years or more</option>
  </select>

  <input id="bootcamp" name="bootcamp" type="checkbox" />
  <label for="bootcamp">Bootcamp</label>

  <input id="tech" name="tech" type="checkbox" />
  <label for="tech">Tech School</label>

  <input id="college" name="college" type="checkbox" />
  <label for="college">College</label>

  <textarea id="comments" name="comments" rows="5" cols="20"></textarea>
  <label for="comments">Comments</label>

  <button>Submit</button>
</form>

Answer 1

调整您的 HTML 代码以始终保持结构(标签然后输入)。您还可以通过只有 2 列并考虑一个间隙来简化您的网格:

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
  font-family: "Lato", sans-serif;
  color: #fafafa;
}

form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1em;
  border-radius: 12px;
  padding: 1em;
  background: #009688;
  margin: 2rem auto 0 auto;
  max-width: 600px;
  align-items: center;
}

form input {
  background: #fff;
  border: 1px solid #9c9c9c;
}

form button {
  background: lightgrey;
  padding: 0.7em;
  width: 100%;
  border: 0;
}

form button:hover {
  background: gold;
}

label {
  padding: 0.5em 0.5em 0.5em 0;
}

input {
  padding: 0.7em;
  margin-bottom: 0.5rem;
}

input:focus {
  outline: 3px solid gold;
}

select {
  height: 100%;
}

@media (min-width: 400px) {
  form {
    grid-gap: 16px;
  }
  label {
    text-align: right;
    grid-column: 1;
  }
  input[type="checkbox"] {
    justify-self: start;
    margin: 0;
  }
  input,
  button {
    grid-column: 2;
  }
  textarea+label {
    align-self: start;
  }
}

<form class="form1" action="">
  <label for="firstName" class="first-name">First Name</label>
  <input id="firstName" type="text">

  <label for="lastName" class="last-name">Last Name</label>
  <input id="lastName" type="text">

  <label for="email">Email</label>
  <input id="email" type="text">
  <label for="experience">Experience</label>
  <select id="experience" name="experience">
    <option value="1">Less than a year</option>
    <option value="2">1 - 2 years</option>
    <option value="3">3 - 5 years</option>
    <option value="5">5 years or more</option>
  </select>

  <label for="bootcamp">Bootcamp</label>
  <input id="bootcamp" name="bootcamp" type="checkbox">

  <label for="tech">Tech School</label>
  <input id="tech" name="tech" type="checkbox">


  <label for="college">College</label>
  <input id="college" name="college" type="checkbox">

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" rows="5" cols="20"></textarea>

  <button>Submit</button>
</form>