css - Radio button not working as I wish

Question

For my project, I have a series of radio buttons. This is going to work like a rating system, where they choose a rating on a place.

<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="1" />1</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="2" />2</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="3" />3</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="4" />4</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="5" />5</label>
</div>   

What is produced seems very strange to me The numbers and buttons are very far from each other.

Answer 1

It seems that you have width style for all input tags. Try to reset it for input[type="radio"]:

input[type="radio"] {
    width: initial;
}

Before: http://jsfiddle.net/Pgcmv/4/

After: http://jsfiddle.net/Pgcmv/2/

UPD: In this case initial works only in Chrome 26, Firefox 16 and Safari 5 and does not work in Opera 12 and IE 10. So you need to set some small value that will appropriate in your case.

Answer 2

I just set the labels to float left and the inputs to float left, then took the inputs outside of the labels to fix it:

My HTML:

<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="1" /><label> 1</label></div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="2" /> <label> 2</label></div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="3" /><label> 3</label> </div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="4" /><label> 4</label> </div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="5" /><label> 5</label> </div>