How to align checkbox and label on same line in html?

Question

In li tags, I check the box and enter a label.

If the label text is larger than the label, the text moves to the next line.

I wrapped the label text, but it did not align the check box and the label on the same line if the label text is too long.

 <li> <input id="checkid" type="checkbox" value="test" /> <label style="word-wrap:break-word">testdata</label> </li> 

Thanks,

Answer 1

Check the box with a label and check it.

HTML:

 <li> <label for="checkid" style="word-wrap:break-word"> <input id="checkid" type="checkbox" value="test" />testdata </label> </li> 

CSS

 [type="checkbox"] { vertical-align:middle; } 

http://jsfiddle.net/pKD9K/1/

Answer 2

You must use <label for=""> for flags or radio stations, and vertical-align enough to align the flags

Try changing your markup to

 <li> <input id="checkid" type="checkbox" value="test" /> <label for="checkid">testdata</label> </li> 

---

 <li> <input id="checkid2" type="checkbox" value="test" /> <label for="checkid2">testdata 2</label> </li> 

And set the CSS as

 input[type="checkbox"] { vertical-align:middle; } 

In case of long text

 label,input{ display: inline-block; vertical-align: middle; } 

Side note: in the label, the flag value must be the identifier of the flag.

Fiddle

Updated Fiddle

Answer 3

Please, try

 <li> <input id="checkid" type="checkbox" value="test" style="float: left;"> <label style="word-wrap: break-word; line-height: 16px; float: left;">testdata</label> </li> 

Answer 4

Just put the div around the input and label ...

  <li> <div> <input id="checkid" type="checkbox" value="test" /> </div> <div> <label style="word-wrap:break-word">testdata</label> </div> </li> 

Answer 5

If you use bootstrap, use this class in the holding.

 radio-inline 

Example:

 <label for="active" class="col-md-4 control-label">Active</label> <div class="col-md-6 radio-inline"> <input type="checkbox" name="active" value="1"> <div> 

Here the Active label and checkbox will be aligned.

Answer 6

Use below CSS to align label with checkbox

  .chkbox label { position: relative; top: -2px; } <div class="chkbox"> <asp:CheckBox ID="Ckbox" runat="server" Text="Check Box Alignment"/> </div>