Radio buttons and label to display in same line

Question

Why my labels and radio buttons won't stay in the same line, what can I do ?

Here is my form:

<form name="submit" id="submit" action="#" method="post">
            <?php echo form_hidden('what', 'item-'.$identifier);?>

            <label for="one">First Item</label>
            <input type="radio" id="one" name="first_item" value="1" />

            <label for="two">Second Item</label>
            <input type="radio" id="two" name="first_item" value="2" />             <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
            </form>

Answer 1

I wasn't able to reproduce your problem in Google Chrome 4.0, IE8, or Firefox 3.5 using that code. The label and radio button stayed on the same line.

Try putting them both inside a <p> tag, or set the radio button to be inline like The Elite Gentleman suggested.

Answer 2

Hmm. By default, <label> is display: inline; and <input> is (roughly, at least) display: inline-block;, so they should both be on the same line.

Perhaps a stylesheet is setting label or input to display: block?

Answer 3

I use this code and works just fine:

input[type="checkbox"], 
input[type="radio"],
input.radio,
input.checkbox {
    vertical-align:text-top;
    width:13px;
    height:13px;
    padding:0;
    margin:0;
    position:relative;
    overflow:hidden;
    top:2px;
}

You may want to readjust top value (depends on your line-height). If you don't want IE6 compatibility, you just need to put this code into your page. Otherwise, you will must add extra class to your inputs (you can use jQuery - or any other library - for that tho ;) )

Answer 4

Put them both to display:inline.

Answer 5

If you use the HTML structure I lay out over in this link you can simply float your label and input to the left and adjust padding/margin until things are lined up.

And yes, you'll want to make your radio button have a class name for old IE. And to have all of them on the same line, according to the markup I linked to above, it would be like so:

<fieldset>
  <div class="some-class">
    <label for="x">Thing 1</label>
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="z">Thing 2</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
  </div>
</fieldset>

means your starter CSS would be something like:

fieldset { overflow:hidden }
.some-class { float:left; clear:none; }
label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }

Answer 6

you might have a width specified for your input tags somewhere in your css.

add a class="radio" to your radio boxes and an input.radio {width: auto;} to your css.

Answer 7

If the problem is that the label and input are wrapping to two lines when the window is too narrow, remove the whitespace between them; e.g.:

<label for="one">First Item</label><input type="radio" id="one" name="first_item" value="1" />

If you need space between the elements, use non-breaking spaces ( ) or CSS.

Answer 8

What I've always done is just wrap the radio button inside the label...

<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>

Something like that, has always worked for me.

Answer 9

I'm assuming the problem is that they are wrapping onto separate lines when the window is too narrow. As others have pointed out, by default the label and input should be "display:inline;", so unless you have other style rules that are changing this, they should render on the same line if there is room.

Without changing the markup, there will be no way to fix this using only CSS.

The simplest way to fix it would be to wrap the radio button and label in a block element, such as a p or a div, and then prevent that from wrapping by using white-space:nowrap. For example:

<div style="white-space:nowrap;">
  <label for="one">First Item</label>
  <input type="radio" id="one" name="first_item" value="1" />
</div>