Radio buttons and label to display in same line

Question

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>

Could you show the whole page and the corresponding css? If you put only the snippet you provided in the body of an HTML page everything will be on the same line so there must be some css rule that prevents this. — Darin Dimitrov, Feb 21 '10 at 14:15
@Darin Dimitrov I have a large css files to be posting here wouldn't be a good idea, what should I look for inside of the(have multiple style sheets) or how can I style this one seperatly? — Gandalf StormCrow, Feb 21 '10 at 14:17
Try on CSS `input[type=radio], .radio { display: inline; }` For IE, you'll have to add on `` since IE doesn't follow the other CSS notion. — Buhake Sindi, Feb 21 '10 at 15:00
Try installing firebug and using the "Inspect" function to list the CSS rules that apply to your elements. — Tobias Cohen, Mar 04 '10 at 10:48
Obviously I’m four years late doing this, but here’s your form, and your radio buttons and labels are on the same line: http://jsfiddle.net/BJU4f/ Please provide code that reproduces the problem. — Paul D. Waite, Mar 12 '14 at 10:59

score 105 · Accepted Answer · edited Feb 13 '20 at 10:38

105

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>

edited Feb 13 '20 at 10:38

Nipun Tharuksha

2,496
4
17
40

answered Feb 28 '10 at 10:40

2

(I'd suggest actually switching around, with labels after the radio buttons, but that's your call.) – Feb 28 '10 at 10:57
1

Thing 1 should be Thing 1 – podeig Mar 15 '12 at 13:56
1

@D_N, can you please fix the label for attribute, I tried but my edit was less than 6 chars so I could not submit. – iancrowther Apr 02 '12 at 12:46
Disappeared for a while. Thanks for fixing that. – Aug 01 '13 at 19:02
@animuson has a better solution that nests the input inside the label. Scroll down and support that one instead! ` First Item ` – Joseph Cho Oct 17 '18 at 15:13
@JosephCho Nesting the input inside the label is fine, but still needs some CSS to stay on the same line in all contexts. People should use what their use case requires. – Oct 17 '18 at 22:08
Nice its working, but 'some-class' working all other label inside another div tag. – Ramees V P Jan 05 '21 at 03:10

score 70 · Answer 2 · answered Mar 02 '10 at 18:58

70

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.

answered Mar 02 '10 at 18:58

animuson

53,861
28
137
147

8

That won't work by itself, there's nothing stopping the words inside the label from being split on different lines. You'd need to make the label display:block or white-space:nowrap. Also, I'm not sure it's semantically correct to have the input inside the label. – Tom Mar 04 '10 at 03:13
12

It is valid to have input wrapped by label element. See http://www.w3.org/TR/html5/forms.html#the-label-element – Erwin May 07 '14 at 12:03
5

The benefit of having the input wrapped by the label is that it makes the text clickable to activate the radio button instead of the user having to click directly on the radio, which is useful for people who are using mobile devices and don't have the pinpoint click accuracy you'd get from a mouse pointer. – MistyDawn Jul 02 '18 at 13:03

score 11 · Answer 3 · answered Feb 28 '10 at 17:27

11

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.

answered Feb 28 '10 at 17:27

Alexar

1,858
5
24
34

1

The better way to do this would be to use the input type selector in your css instead of adding a new class. You can simply add `input:radio { /* styles here */ }` or `input[type="radio"] { /* styles here */ }`to your css. There's no need to use a separate class to specify the style rules when you are applying them too all elements that are a radio input. – MistyDawn Jul 02 '18 at 13:06

score 8 · Answer 4 · answered Dec 08 '16 at 14:59

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>

score 7 · Answer 5 · answered Feb 25 '10 at 16:12

7

Put them both to display:inline.

answered Feb 25 '10 at 16:12

casraf

21,085
9
56
91

Paul D. Waite · Answer 6 · 2014-03-12T11:00:03.140

5

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?

edited Mar 12 '14 at 11:00

answered Feb 21 '10 at 21:10

Paul D. Waite

96,640
56
199
270

score 4 · Answer 7 · answered Mar 04 '10 at 03:12

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>

score 2 · Answer 8 · edited Feb 13 '20 at 10:42

2

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

**

edited Feb 13 '20 at 10:42

Nipun Tharuksha

2,496
4
17
40

answered Oct 30 '19 at 07:51

Raushan Kumar

31
2

1

Please add a brief explanation of what you did, so that the author may better understand your solution – giuseppedeponte Oct 30 '19 at 08:12

score 1 · Answer 9 · answered Feb 21 '10 at 20:37

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.

score 1 · Answer 10 · answered Feb 22 '10 at 05:46

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

score 0 · Answer 11 · answered Jun 29 '13 at 12:16

0

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>

answered Jun 29 '13 at 12:16

sherb

9
1

1. No it’s not — [it’s for labelling form elements](https://www.w3.org/TR/html/sec-forms.html#the-label-element), whether in a menu or not. 2. You’re meant to specify which form element the label describes, by putting the form element’s `id` as the value of the `for` attribute on the `` element. Your example misses that out. – Paul D. Waite Aug 01 '17 at 13:01

score 0 · Answer 12 · edited Jan 19 '16 at 21:14

0

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.

edited Jan 19 '16 at 21:14

Igor Ivancha

3,413
4
30
39

answered Feb 28 '10 at 17:40

kevingessner

18,559
5
43
63

score 0 · Answer 13 · answered Nov 21 '14 at 23:28

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>

score 0 · Answer 14 · edited Feb 13 '20 at 15:36

0

fieldset {
  overflow: hidden
}

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

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

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

edited Feb 13 '20 at 15:36

G_real

1,137
1
18
28

answered Feb 13 '20 at 13:52

Saurav Bisht

21
4

score 0 · Answer 15 · edited May 23 '17 at 11:47

0

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

edited May 23 '17 at 11:47

Community

1
1

answered Jun 07 '11 at 14:13

AdrenalineJunky

891
11
15

Radio buttons and label to display in same line

15 Answers15

Linked

Related