Radio buttons and label to display in same line

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>

If you use the HTML structure I lay out in this question 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 {
      overflow: hidden
    }
    
    .some-class {
      float: left;
      clear: none;
    }
    
    label {
      float: left;
      clear: none;
      display: block;
      padding: 0px 1em 0px 8px;
    }
    
    input[type=radio],
    input.radio {
      float: left;
      clear: none;
      margin: 2px 0 0 2px;
    }
<fieldset>
      <div class="some-class">
        <input type="radio" class="radio" name="x" value="y" id="y" />
        <label for="y">Thing 1</label>
        <input type="radio" class="radio" name="x" value="z" id="z" />
        <label for="z">Thing 2</label>
      </div>
    </fieldset>

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.


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.


Put them both to display:inline.


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. See http://jsfiddle.net/BJU4f/

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