Radio buttons and label to display in same line
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.
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>