0

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.

Radio Button Rating System

Cody Guldner
  • 2,888
  • 1
  • 25
  • 36
Ze Carioca Silva
  • 445
  • 7
  • 16
  • 3
    You need to post some CSS or a working example on jsFiddle. I don't think there is enough information to get an answer at the moment. – Daniel Imms Mar 30 '13 at 16:14
  • The numbers and buttons are very far from each other...That is what I am complaaining about – Ze Carioca Silva Mar 30 '13 at 16:16
  • Just try to trace styles in your browser – hazzik Mar 30 '13 at 16:16
  • Take the input out of the label for each, see below – Fleming Slone Mar 30 '13 at 16:19
  • We need to see your CSS to answer this correctly. On your code: keep in mind that each ID can be used only once per page (the code is using it five times now). Inputs should be **outside** of labels. If you wish to make the label clickable, read up on the label's "for" attribute. – Marijke Luttekes Mar 30 '13 at 16:39
  • Visual Studio 2012 is giving me those Ids. I use Html helpers... But the error keeps coming even if I use Html with no helpers – Ze Carioca Silva Mar 30 '13 at 16:42
  • @MarijkeLuttekes labels *may* be near the inputs or around the inputs. – hazzik Mar 30 '13 at 16:43
  • @hazzik placing inputs inside labels create issues with certain screen readers. Well, more discussion there -> http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag – Marijke Luttekes Apr 05 '13 at 09:41

2 Answers2

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.

hazzik
  • 13,019
  • 9
  • 47
  • 86
0

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>
Fleming Slone
  • 181
  • 16
  • 1
    Then labels will not be clickable – hazzik Mar 30 '13 at 16:20
  • I would recommend making them clickable in a different way. The question about the validity of this practice was raised here: http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag and although either way is valid, my approach will give you the style control that you are looking for. – Fleming Slone Mar 30 '13 at 16:27
  • Don't you just need to decrease the width of your inputs? – Fleming Slone Mar 30 '13 at 16:33