如何将标签与复选框对齐

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

Thanks in advance

Answer 1

First of all use <label> instead of <span> .

If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.

 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> 

Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.

If you can change the HTML

The best and new method to use checkbox is

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

Answer 2

This is one way of doing it:

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

When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.

Answer 3

 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> 

Make this simple change!