如何对齐我的单选复选框，使它们位于左侧，并将列表与我的 FCC 调查表上的其他元素对齐

Question

我正在尝试 freecodecamp 的调查表单挑战，但我似乎无法让我的单选按钮列表与页面上的其他元素对齐，我该如何解决这个问题？

我确定代码中有很多错误，但我真的很感激一些帮助，提前谢谢你！

目录：

.lists{
  grid-template-columns; repeat(2, minmax(50px, 1fr));
  display: block;
  padding: 10px 10px 5px 5px;
  text-align: right; 
  max-width: 300px;
}

<div class="lists">
   <ul> 
    <li><label> Women-only Classes<input name="improvements" type="checkbox"value="1"></label></li>
    <li><label>More free-weights<input name="improvements" type="checkbox" value="2"> </label></li>
    <li><label>24 hour access<input name="improvements" type="checkbox" value="3"></label></li>
    <li><label>Late night classes<input name="improvements" type="checkbox" value="4"></label></li>
    <li><label>On-site health checks<input name="improvements" type="checkbox" value="5"> </label></li>  
  </ul>
</div>

Answer 1

您可以使用

position: absolute：

.lists{
  grid-template-columns; repeat(2, minmax(50px, 1fr));
  display: block;
  padding: 10px 10px 5px 5px;
  text-align: right; 
  max-width: 300px;
}
.lists li label {
  position: relative;
  padding-left: 20px;
}
.lists input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
}

<div class="lists">
   <ul> 
    <li><label> Women-only Classes<input name="improvements" type="checkbox"value="1"></label></li>
    <li><label>More free-weights<input name="improvements" type="checkbox" value="2"> </label></li>
    <li><label>24 hour access<input name="improvements" type="checkbox" value="3"></label></li>
    <li><label>Late night classes<input name="improvements" type="checkbox" value="4"></label></li>
    <li><label>On-site health checks<input name="improvements" type="checkbox" value="5"> </label></li>  
  </ul>
</div>