Question

当我正在处理一个复选框时，我按照我需要的方式设置它，但它旁边的标签一直在移动。未选中时，它会与框的底部对齐，但是当选中它时会移动到中心，将其对齐到框中。

.check {
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
}

.check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
}

.check label::after {
    font-size: 13px;
    color: #8e989f;
}

.check input[type="checkbox"]:checked + label::after {
    font-family: "Material Icons";
    content: "\e5ca";
}

.check input[type="checkbox"] {
    left: -9999px;
    position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
    display: inline-block;
} 

<label class="check">
                                <input type="checkbox" value="mandatory" name="checkbox1" id="check3">
                                <label for="check3"> </label>
                                Mark as Mandatory
                            </label>

Fiddle

Answer 1

＆＃13;

.check {
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
}

.check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
     float: left; /*MODIFICATION */
  
}

.check label::after {
    font-size: 13px;
    color: #8e989f;
    
}

.check input[type="checkbox"]:checked + label::after {
    font-family: "Material Icons";
    content: "\e5ca";
    
}

.check input[type="checkbox"] {
    left: -9999px;
    position: absolute;
    
}
.check input[type="checkbox"]:checked + label + div {
    display: inline-block;
    
}

＆＃13;

<label class="check">
 <input type="checkbox" value="mandatory" name="checkbox1" id="check3">
   <label for="check3"> </label>
                                Mark as Mandatory
                            </label>

＆＃13;

只需添加此float:left属性。

 .check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
     float: left; /*MODIFICATION*/

}

Working fiddle

标签内的样式复选框正在移动，为什么？

1 个答案: