Как выровнять этикетку с флажком

Question

span{ 
 
text-align: justify; 
 
}

<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>

I want to align the label for excessive reinforcement checkbox like image2

For example

Заранее спасибо

Answer 1

span { 
 
    text-align: justify; 
 
} 
 
.make-table { 
 
    display: table-cell; 
 
    /* make it behave like table-cell. so that they fall beside each other. */ 
 
}

<div class="any-class"> 
 
    <label><span class="make-table"><input type="checkbox" name="type"></span> 
 
    <span class="make-table">Excessive<br> Reinforcement</span> 
 
    </label> 
 
</div> 
 

 
<hr> 
 
<div style="color:red">Wrap it inside any-class and align as you want. 
 
    <br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>

Сделать это простое изменение!

Answer 2

Прежде всего использовать <label> вместо <span>.

Если мы используем bootstrap, мы обычно управляем этим с помощью классов, но здесь, если мы говорим о пользовательских css, это может быть решением.

label{ 
 
    text-align: justify; 
 
    float: left; 
 
    line-height: 20px; 
 
} 
 
input{ 
 
    float:left; 
 
}

<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>

Выше я добавил id в флажке и for в этикетке, так что флажок будет выбран по нажатию ярлыка также.

Если вы можете изменить HTML

Лучший и новый метод использовать флажок

<label><input type="checkbox" name="type">Excessive Reinforcement</label> 

Answer 3

Это один из способов сделать это:

<label for="type-1"> 
    <input id="type=1" type="checkbox" name="type"> Excessive Reinforcement 
</label><br> 

Когда используя элементы ввода, вы всегда должны указывать метку с атрибутом for, которому присвоен идентификатор входного элемента. А также убедитесь, что идентификаторы входных элементов уникальны.