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 https://stackoverflow.com/questions/2350152/documentation-on-fieldset-label-tags-instead-of-using-tables/2350481#2350481">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?

I always avoid using float:left but instead I use display: inline

<div class="wrapper-class">
  <input type="radio" id="radio1">
  <label for="radio1">Test Radio</label>
</div>

.wrapper-class input[type="radio"] {
  width: 15px;
}

.wrapper-class label {
  display: inline;
  margin-left: 5px;
  }

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>

** Used table to align the radio and text in one line >

<div >
  <table>
    <tbody>
      <tr>
        <td><strong>Do you want to add new server ?</strong></td>
        <td><input type="radio" name="addServer" id="serverYes" value="1"></td>
        <td>Yes</td>
        <td><input type="radio" name="addServer" id="serverNo" value="1"></td>
        <td>No</td>

      </tr>
    </tbody>
  </table>
</div>

**

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.

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 ;) )

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 (& nbsp;) or CSS.

My answer from a different post on the same subject should help you https://stackoverflow.com/questions/6229437/zend-form-for-multicheckbox-remove-input-from-labels/6266429#6266429

Note: Traditionally the use of the label tag is for menus. eg:

<menu>
<label>Option 1</label>
<input type="radio" id="opt1">
	
<label>Option 2</label>
<input type="radio" id="opt2">
	
<label>Option 3</label>
<input type="radio" id="opt3">	
</menu>

I was having the similar issue of keeping all radio buttons on the same line. After trying all the things I could, nothing worked for me except the following. What I mean is simply using table resolved the issue allowing radio buttons to appear in the same line.

<table>
<tr>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name
        </label>
    </td>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date
        </label>
    </td>
</tr>
</table>

fieldset {
  overflow: hidden
}
    
.class {
  float: left;
  clear: none;
}
    
label {
  float: left;
  clear: both;
  display:initial;
}
    
input[type=radio],input.radio {
  float: left;
  clear: both;     
}