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
?