如何对齐单选框，使其位于左侧，并使列表与FCC调查表中的其他元素对齐？

Question

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

我确定代码中有很多错误，但是我非常感谢您的帮助，在此先感谢您！

HTML：

.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>