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

Question

Within li tags, I am placing a checkbox and label input.

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

I wrapped the label text but it's not aligning the checkbox and label in the same line if 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

Wrap the checkbox with the label and check this

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/