метка флажка, перекрывающая флажок

Question

Я занимаюсь PHP-проектом с использованием структуры YII. Я применил 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, 
     ); 

Вот мой текущий вид

EDIT 1

Здесь код rendred 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

Дайте левую прокладку на ваш ярлык почти такой же ширины вашего изображения.

метка {обивка левый:/ширина вашего CheckBox изображения /}