css 如何将缩放的复选框与标签对齐

kcwpcxri 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(134)

我有下面的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>

但这并不能解决这个问题。会不会是我不应该使用缩放来增加这里复选框的大小？

css

来源：https://stackoverflow.com/questions/74483020/how-to-align-a-zoomed-checkbox-with-a-label

2条答案

按热度按时间

xytpbqjk1#

我强烈反对使用ZOOM属性。要增加元素，最好使用-transform。
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

.checkboxes {
    outline: 1px solid green;
    padding: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
}
.checkboxes input, .checkboxes label {
    margin: 0;
    min-height: 20px;
    display: flex;
    align-items: center;
}
.checkboxes label {
    white-space: nowrap;
        margin-left: 7px;
        outline: 1px solid grey;
        padding-left: 5px;
}
.checkboxes input {
        transform: scale(2);
        outline: 1px solid grey;
}
.checkboxes label span {
    vertical-align: middle;
}

<div class="checkboxes">
    <input type="checkbox" id="inactive-accounts" name="" value="1">
    <label for="inactive-accounts">Show Inactive Accounts</label>
</div>

赞(0）回复(0）举报 2023-01-27

ycggw6v22#

你可以自由地将你的元素 Package 在div或"container"元素中吗？如果可以，你可以将display: flex;和align-items: center;设置到那个元素上，这样你的输入和标签就会对齐。
这里有一个代码片段，在标签旁边显示了一个常规的和缩放的复选框。

div {
  display: flex;
  align-items: center;
}

<div>
  <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>
</div>
<br>

<div>
  <input type="checkbox" class='btn-filter' style='zoom:1; justify-content:center' id="inactive-accounts-2" name="" value="1">
  <label style='font-size:15px' for="inactive-accounts-2">Show Inactive Accounts</label>
</div>

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何将缩放的复选框与标签对齐

2条答案

相关问题

热门标签

最新问答