[html] 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>

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

.wrapper-class input[type="radio"] {_x000D_
  width: 15px;_x000D_
}_x000D_
_x000D_
.wrapper-class label {_x000D_
  display: inline;_x000D_
  margin-left: 5px;_x000D_
  }

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

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

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

**

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.

My answer from a different post on the same subject should help you zend form for multicheckbox remove input from labels

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

fieldset {
  overflow: hidden
}

.class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: both;
  display:initial;
}

input[type=radio],input.radio {
  float: left;
  clear: both;     
}

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.

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.

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>

Put them both to display:inline.

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.

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

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>