html - CSS/HTML 清单内容对齐
问题描述
我在使用以下代码时遇到了困难——除了复选框的内容之外,一切都按照我的意愿工作。刻度线和十字线太低。
有人可以告诉我我在这里做错了什么吗?我承认我从多个来源破解了这段代码并将其粘在一起,所以我很高兴承认我误解了某些东西。
谢谢!
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
解决方案
添加line-height: 1.2;
到您的.checkbox:before
:
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 1.2; /* add this*/
}
推荐阅读
- angular - 为什么以下“路线”构造有效?
- c++ - 如何在 Raspberry Pi 上打印到 HDMI 显示器
- c# - 无法将 SQL VARBINARY 正确转换为 byte[] 并在 ASP.NET c# 中转换为 Image
- javascript - Bootstrap 4:下拉菜单部分消失在浏览器边缘之外
- java - 即使按下停止按钮也无法停止闹钟响起
- git - 如何仅提交“git add -p file”更改而不对同一文件进行其他更改并且没有分阶段重命名?
- python - 使用 python 正则表达式,只有那些匹配我的模式但不包含'='
- java - 添加存储库会引发 bean 创建错误
- angular - 将按钮值传递给组件中的功能
- python - 估计的高斯分布参数错误