How do you add a checkbox to the start of a list item in HTML without altering the size of the list item

I am using jQuery's ajax library to build a list to display

the list looks like this

<ul id="results">
<li onclick="convener_selected('1')">mister 1</li>
<li onclick="convener_selected('2')">mister 2</li>
<li onclick="convener_selected('2')">mister 3</li>
</ul>

now when I click on each item of the list, even on the blank part, the on click event fires normally

however I added a checkbox at the start of the list with these methods:

a)

 <li><input type="checkbox" value="1"> <span  onclick="convener_selected('1')">mister 1</span> </li>    

b)

<input type="checkbox" value="1">
<li onclick="convener_selected('1')">mister 1</li>

c)

<li><input type="checkbox" value="1"> <div  onclick="convener_selected('1')">mister 1</div></li>    

the problem with a) is that now I have to click on the leters of mister 1 in order for the on click event to fire the problem with b) and c) is that they appear in different lines, if I add

style="display:in-line;"

then in c) it behaves like the span (i.e. it only works if I click on the letters) and in b) it looks awful

is there something I can do to keep the old functionality while adding a checkbox at the start?

thanks in advance for any help you can provide