CSS: how to make label appear right of the radio?

Question

Say I have the following mark up:

<label for="name">Name:</label>
<input type="radio" name="name" id="name"/>

The order of the tags appear to be proper to me (in a semantic sense: label before the thing you're labeling). But I want to display this as radio button first, followed by the label. How can I do that in CSS?

Plop

Answer 1

You don't need CSS. Wrap your input in a label and put the text last.

<label><input type="radio" name="name" id="name"/>Name:</label>

Is that still semantic for you?

Or you could try the float.

Mo

Answer 2

Tag order in this case doesn't matter. And even if it did, then it would be the other way around - first you would have to create the radio button, and then reference it in the label.

To answer your question: just do it in the order you want to display it

<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>

fiddle http://jsfiddle.net/Jm2JR/1/..

Hobard

Answer 3

write like this:

input{
 float:left;
}

Check this http://jsfiddle.net/3cLRg/

Sigman

Answer 4

<label for="name" style="float:right;">Name:</label>

Tomtit

Answer 5

try this:

<label style="position:relative; left:100px;" for="name">Name:</label>
<input type="radio" name="name" id="name"/>

2nd approach is :

<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>

Elvinaelvira

Answer 6

Hi you just define your input tag as like that

<label>Name:
<input type="radio" name="name" id="name"/></label>

<br />


<label>
<input type="radio" name="name" id="name"/> Name    
</label>
​

Live demo http://jsfiddle.net/rohitazad/bhBQn/1/

Agone