Html inline div alignment issue

Html inline div alignment issue

<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
Hello I have a layout similar to the one above. I have some other things
in the php file, but they are irrelevant. For example every new 5th
element causes a new line (br), which will make sense when you see the
pictures.
Here is an image representation of the outcome:
http://i.imgur.com/Xd6yjHE.png?1
This is what I need : http://i.imgur.com/wKVV9Y9.png?1
How can I possibly do this, I will appreciate any idea. Cheers.
Note: Span tags contain the text next to the radio buttons.