如何对齐标签和自定义复选框?代码片段如下。我想确保标签和开关垂直对齐,我还应该能够使用标签中的任何文本。我不能使用 position:absolute
方法来对齐标签,因为文本可能会更改并且我不希望有任何重叠。
.switch {
position: relative;
display: inline-block;
}
.switch input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
height: 25px;
width: 50px;
border-radius: 25px;
background-color: #999;
}
.switch input[type="checkbox"]:checked {
background-color: green;
}
.switch input[type="checkbox"]:after {
position: absolute;
content: ' ';
height: 16.66667px;
width: 16.66667px;
top: 6.5px;
right: 33px;
border-radius: 11.11111px;
background: #fff;
}
.switch input[type="checkbox"]:checked::after {
right: 6px;
}
<div class="switch">
<label for="checkbox1">Test Test Test Test</label>
<input type="checkbox" id="checkbox1">
</div>
最佳答案
您应该能够在输入上使用垂直对齐属性(例如:vertical-align: middle;
):
.switch {
position: relative;
display: inline-block;
}
.switch input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
height: 25px;
width: 50px;
border-radius: 25px;
background-color: #999;
vertical-align: middle;
}
.switch input[type="checkbox"]:checked {
background-color: green;
}
.switch input[type="checkbox"]:after {
position: absolute;
content: ' ';
height: 16.66667px;
width: 16.66667px;
top: 6.5px;
right: 33px;
border-radius: 11.11111px;
background: #fff;
}
.switch input[type="checkbox"]:checked::after {
right: 6px;
}
<div class="switch">
<label for="checkbox1">Test Test Test Test</label>
<input type="checkbox" id="checkbox1">
</div>
关于html - 对齐标签和自定义复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35564673/