5

I have an HTML form with sections laid out like this:
enter image description here

I do want the labels to be inline so that this section won't be 7 line breaks tall, but I would like to know how I can make sure the radio buttons stay with their labels.

Note: the labels are of varying lengths and are populated dynamically with data from the server, so I can't set a fixed width div without causing some weird spacing issues.

If there is an idiomatic way of doing this, please show me.

Brandon Henry
  • 3,632
  • 2
  • 25
  • 30

2 Answers2

12

Put each input/label pair in a span, then set white-space: nowrap on the span. Something like this:

<div class="radios">
    <span>
        <input type="radio" id="productTypeRC" />
        <label for="productTypeRC">RC</label>
    </span>
    ...
</div>

CSS:

.radios > span
{
    white-space: nowrap;
}

Edit: The above technique suffers from a bug in Chrome where the pairs don't wrap and instead are hidden. This bug is demonstrated in the question Text doesn't wrap properly between elements having white-space: nowrap. Solutions include using float: left with some margin added to make up for collapsed spacing, or to muck with the HTML until it works. If you just put the <input> and <label> as the same line as the <span>, it works.

<div class="radios">
    <span><input type="radio" id="productTypeRC" /> <label for="productTypeRC">RC</label></span>
    <span><input type="radio" id="productTypeTC" /> <label for="productTypeTC">TC</label></span>
    <span><input type="radio" id="productTypeNS" /> <label for="productTypeNS">NS</label></span>
    ...
</div>

jsfiddle.net/Z5uaT/57

Community
  • 1
  • 1
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • nice they are in spans already. white-space: nowrap is new to me. i will try it now. thanks. – Brandon Henry Jul 16 '11 at 00:22
  • hmm. this only works somewhat. if there are too many button/label pairs those need to drop to the new line, but using white-space nowrap they do not. i want the whole pair to drop to a new line if necessary. – Brandon Henry Jul 16 '11 at 00:27
  • my bad. i had no spaces between the spans. this works great. thank you. – Brandon Henry Jul 16 '11 at 00:37
  • @Brandon - I'm surprised it behaves like that, but I see you are correct. But we can still make it work. See my updated answer with a link to a working demo. – gilly3 Jul 16 '11 at 00:39
  • you don't have to double wrap the spans. my html was generated by code so there were no spaces like this. input labelinput label. changing it to input label input label totally worked. – Brandon Henry Jul 16 '11 at 01:59
  • @BrandonH - I finally figured out why it worked for you and not for me. See my update. – gilly3 Feb 24 '14 at 20:29
5

Put the checkbox inside the label (yes, this is valid) and make the label inline-block (see this JSfiddle for a demo). IMO, this is a more elegant and semantic solution than the span wrapping suggested by gilly3, which is why I decided to post even though you've already accepted an answer.

Community
  • 1
  • 1
You
  • 22,800
  • 3
  • 51
  • 64