Radio buttons and shortcuts to display on one line

Question

Why won't my labels and switches stay on 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> 

Answer 1

If you are using the HTML structure that I set out in this question , you can simply put your shortcut and type to the left and adjust the indent / margin until the lines are aligned.

And yes, you want your switch to have a class name for old IE. And so that they are all on the same line, in accordance with the markup associated with it, this would be like this:

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

means your starting CSS will be something like this:

 fieldset { overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 2px 1em 0 0; } input[type=radio], input.radio { float: left; clear: none; margin: 2px 0 0 2px; } 

Answer 2

What I always did was just turn on the switch in the shortcut ...

 <label for="one"> <input type="radio" id="one" name="first_item" value="1" /> First Item </label> 

Something like this always worked for me.

Answer 3

you may have the width specified for input tags somewhere in css .

add class="radio" to your radio books and input.radio {width: auto;} to your css.

Answer 4

Hm. By default, <label> display: inline; and <input> (roughly) display: inline-block; , so both must be on the same line. See http://jsfiddle.net/BJU4f/

Perhaps the stylesheet sets the label or input to display: block ?

Answer 5

Put them in display:inline .

Answer 6

I guess the problem is that they wrap on separate lines when the window is too narrow. As others have pointed out, by default the label and input should be "display: inline;", so if you do not have other style rules that change this, they should display on the same line if there is space.

Without changing the markup, you cannot fix this using only CSS.

The easiest way to fix this is to wrap the switch and label in a block element, such as p or div , and then prevent the wrapping with 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> 

Answer 7

I use this code and it works 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 can redirect the top value (depends on your line-height ). If you don't need IE6 compatibility, you just need to put this code on your page. Otherwise, you must add an extra class to your inputs (you can use jQuery or any other library for this tho;))

Answer 8

I could not reproduce your problem in Google Chrome 4.0, IE8 or Firefox 3.5 with this code. The label and the radio button remained on the same line.

Try placing them inside the <p> or set the radio button to be embedded as suggested by The Elite Gentleman.

Answer 9

If the problem is that the shortcut and input are wrapped in two lines when the window is too narrow, remove the spaces between them; eg:.

 <label for="one">First Item</label> <input type="radio" id="one" name="first_item" value="1" /> 

If you need space between elements, use non-breaking spaces ( & nbsp; ) or CSS.

Answer 10

My answer from another post on the same question should help you zend form for multicheckbox remove input from shortcuts

Answer 11

Note. Traditionally, using a tag tag is intended 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> 

Answer 12

I had a similar problem with keeping all the switches on the same line. Having tried everything I could, nothing worked for me, except the following. What I mean is simply using a table that solves the problem, allowing the switches to appear on 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> 

Answer 13

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

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

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