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

我正在学习使用表格的网格，并坚持让我的表格在其中正确工作。大部分都是好的，直到我找到复选框，标签就不再对齐了。我希望这些标签位于复选框的右侧，而不是位于左侧的其他所有标签。相反，标签会被碰撞到下一行

这是我的密码：

@导入url（“https://fonts.googleapis.com/css?family=Lato:400，400i，700”）；
身体{
字体系列：“Lato”，无衬线；
颜色：#fafafa；
}
形式{
显示：网格；
网格模板柱：1fr 1em 2fr；
边界半径：12px；
填充：1em；
背景#009688；
保证金：2rem自动0自动；
最大宽度：600px；
}
表单输入{
背景：#fff；
边框：1px实心#9c9c；
}
窗体按钮{
背景：浅灰色；
填充：0.7em；
宽度：100%；
边界：0；
}
窗体按钮：悬停{
背景：金；
}
标签{
填充：0.5em0.5em0.5em0；
}
输入{
填充：0.7em；
边缘底部：0.5雷姆；
}
输入：焦点{
外形：3件纯金；
}
@介质（最小宽度：400px）{
形式{
栅隙：16px；
}
标签{
文本对齐：右对齐；
网格柱：1/3；
}
输入[type=“checkbox”]{
网格柱：3/3；
自我辩护：开始；
保证金：0；
}
输入，
钮扣{
网格柱：3/4；
}
文本区域+标签{
对齐自我：开始；
}
}

名字
姓
电子邮件
经验
不到一年
1-2年
3-5年
5年或以上
训练营
技术学校
学院
评论
提交

HTML:

<div>
  <input id="bootcamp" name="bootcamp" type="checkbox" />
  <label for="bootcamp">Bootcamp</label></br>
  <input id="tech" name="tech" type="checkbox" />
  <label for="tech">Tech School</label></br>
  <input id="college" name="college" type="checkbox" />
  <label for="college"> College</label>
</div>

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

HTML:

<div>
  <input id="bootcamp" name="bootcamp" type="checkbox" />
  <label for="bootcamp">Bootcamp</label></br>
  <input id="tech" name="tech" type="checkbox" />
  <label for="tech">Tech School</label></br>
  <input id="college" name="college" type="checkbox" />
  <label for="college"> College</label>
</div>

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

---

调整HTML代码以始终保持结构（标签然后输入）。你也可以通过拥有2个列来简化网格，并考虑一个缺口：

@导入url（“https://fonts.googleapis.com/css?family=Lato:400，400i，700”）；
身体{
字体系列：“Lato”，无衬线；
颜色：#fafafa；
}
形式{
显示：网格；
网格模板列：1fr 2fr；
网格间距：1米；
边界半径：12px；
填充：1em；
背景#009688；
保证金：2rem自动0自动；
最大宽度：600px；
对齐项目：居中；
}
表单输入{
背景：#fff；
边框：1px实心#9c9c；
}
窗体按钮{
背景：浅灰色；
填充：0.7em；
宽度：100%；
边界：0；
}
窗体按钮：悬停{
背景：金；
}
标签{
填充：0.5em0.5em0.5em0；
}
输入{
填充：0.7em；
边缘底部：0.5雷姆；
}
输入：焦点{
外形：3件纯金；
}
挑选{
身高：100%；
}
@介质（最小宽度：400px）{
形式{
栅隙：16px；
}
标签{
文本对齐：右对齐；
网格柱：1；
}
输入[type=“checkbox”]{
自我辩护：开始；
保证金：0；
}
输入，
钮扣{
网格柱：2；
}
文本区域+标签{
对齐自我：开始；
}
}

名字
姓
电子邮件
经验
不到一年
1-2年
3-5年
5年或以上
训练营
技术学校
学院
评论
提交

调整HTML代码以始终保持结构（标签然后输入）。你也可以通过拥有2个列来简化网格，并考虑一个缺口：

@导入url（“https://fonts.googleapis.com/css?family=Lato:400，400i，700”）；
身体{
字体系列：“Lato”，无衬线；
颜色：#fafafa；
}
形式{
显示：网格；
网格模板列：1fr 2fr；
网格间距：1米；
边界半径：12px；
填充：1em；
背景#009688；
保证金：2rem自动0自动；
最大宽度：600px；
对齐项目：居中；
}
表单输入{
背景：#fff；
边框：1px实心#9c9c；
}
窗体按钮{
背景：浅灰色；
填充：0.7em；
宽度：100%；
边界：0；
}
窗体按钮：悬停{
背景：金；
}
标签{
填充：0.5em0.5em0.5em0；
}
输入{
填充：0.7em；
边缘底部：0.5雷姆；
}
输入：焦点{
外形：3件纯金；
}
挑选{
身高：100%；
}
@介质（最小宽度：400px）{
形式{
栅隙：16px；
}
标签{
文本对齐：右对齐；
网格柱：1；
}
输入[type=“checkbox”]{
自我辩护：开始；
保证金：0；
}
输入，
钮扣{
网格柱：2；
}
文本区域+标签{
对齐自我：开始；
}
}

名字
姓
电子邮件
经验
不到一年
1-2年
3-5年
5年或以上
训练营
技术学校
学院
评论
提交