html - 如何对齐我的单选框,使其位于左侧,并将列表与我的 FCC 调查表上的其他元素对齐?
问题描述
我正在尝试 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>
解决方案
您可以使用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>
推荐阅读
- python - 如何在 Python-pptx 中更改图表背景颜色
- git - 如何从 git 历史记录中提取所有更改或添加的文件?
- python - Python / Docker - ModuleNotFoundError:没有命名的模块
- mercurial - 如何找出从哪里调用 Mercurial 挂钩文件?
- tensorflow - 继续在 SavedModel 上训练或从 SavedModel 加载检查点
- css - 网格模板区域和网格模板列之间的关系
- excel - 昨天成功填充组合框,但今天失败
- javascript - 如何解决“JavaScript 堆内存不足”?
- php - 从字符串中删除所有特殊字符以使其成为有效的电子邮件(但保留 äöüß)
- python-3.x - 在插入 MongoDB 之前删除 csrf_token