It's pretty simple, just turn your label
element to display: block;
and use margin-left
for the label
and float
your radio button to the left
Demo 2 (Nothing fancy, just used multiple radio for the demonstration)
input[type=radio] {
float: left;
}
label {
margin-left: 30px;
display: block;
}
Just note that say if you are storing the radio with the labels in an li
element, something like
<ul class="radiolist">
<li>
<input type="radio"><label>Your text goes here</label>
</li>
</ul>
So make sure you self clear them by using something like
.radiolist li:after {
content: "";
clear: both;
display: table;
}
That will ensure that you are self clearing all the li
elements, and about the :after
psuedo, it is well supported in IE8 so nothing to worry about.