我有下面的html,它呈现了以下内容
<input type="checkbox" class='btn-filter' style='zoom:2; id="inactive-accounts" name="" value="1">
<label style= 'font-size:15px' for="inactive-accounts">Show Inactive Accounts</label><br>
如果复选框是常规大小,文本与复选框对齐很好,但由于我使用缩放来增加复选框的大小,它没有正确对齐。我尝试了一个解决方案,我发现堆栈溢出创建CSS如下:
.checkboxes label {
display: inline-block;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
zoom:"2"
}
.checkboxes label span {
vertical-align: middle;
}
<input type="checkbox" class='btn-filter' style='zoom:2; justify-content:center' id="inactive-accounts" name="" value="1">
<label style= 'font-size:15px' for="inactive-accounts">Show Inactive Accounts</label><br>
但这并不能解决这个问题。会不会是我不应该使用缩放来增加这里复选框的大小?
2条答案
按热度按时间xytpbqjk1#
我强烈反对使用ZOOM属性。要增加元素,最好使用-transform。
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
ycggw6v22#
你可以自由地将你的元素 Package 在
div
或"container"元素中吗?如果可以,你可以将display: flex;
和align-items: center;
设置到那个元素上,这样你的输入和标签就会对齐。这里有一个代码片段,在标签旁边显示了一个常规的和缩放的复选框。