复选框标签与复选框

Question

我正在使用YII框架进行PHP项目。我已经为复选框应用了css样式，但问题是标签的文本与复选框重叠。所以，如果有人可以提供帮助，我将非常感激。

这是我的css

input[type=checkbox]{
    position: static;
    margin-right: 10px;
    margin-left: 0;
    display: none;
    border: none !important;
    box-shadow: none !important;
}

input[type=checkbox] + label{
    display: block;
    color: #595a5b;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background:#595a5b;
}

input[type=checkbox]:checked + label{
    background: #3e97eb;
    content: '\f14a';
    color: #595a5b;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

以下是渲染复选框的代码

return array(   
            'action'=>url("/xsearch/location"),
            'elements' => array(
                'label'=> $this->t('<h3 style="border-bottom: solid #DDDDDD 1px;color: #0a0a0a;margin-left: 0px;">Location</h3>'),
                'location'=>array(
                    "type"=>"checkboxlist",
                    "items"=>$locations,
                    'layout' => "{label}\n<fieldset>{input}</fieldset>\n{hint}",
                ),
            ),
            'id' => 'go-to-top-location',
            'model' => $this->model,
        );

这是我目前的观点

编辑1

这是一百个HTML代码。

<div class="row field_location">
<label for="MXsearchForm_location">Location:</label>
<fieldset><input id="ytMXsearchForm_location" type="hidden" value="" name="MXsearchForm[location]"><input id="MXsearchForm_location_0" value="11" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_0">test</label><br>
<input id="MXsearchForm_location_1" value="1" checked="checked" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_1">Colombo</label><br>
<input id="MXsearchForm_location_2" value="2" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_2">Gampaha</label><br>
<input id="MXsearchForm_location_3" value="3" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_3">kandy</label><br>
<input id="MXsearchForm_location_4" value="16" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_4">kegalla</label><br>
<input id="MXsearchForm_location_5" value="7" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_5">Kurunegala</label><br>
<input id="MXsearchForm_location_6" value="12" type="checkbox" name="MXsearchForm[location][]"> <label for="MXsearchForm_location_6">abc</label></fieldset>
</div>

Answer 1

将左边距填充到你的标签上几乎与你的复选框图像的宽度相同。

标签{padding-left：/ 复选框图片的宽度 /}