Radio Buttons Not Lining Up Horizontally

My HTML radio buttons are lining up vertically not horizontally. Also, the text for each of them is not right beside the button like I wish it would be.

Solution 1:

Checkboxes are aligned horizontally by default, as are the labels. You must be setting display:block on an element. Either remove that, or overwrite it by applying display:inline-block.

Try the following CSS:

input[type="radio"] {
    display:inline-block;
}

label {
    display:inline-block;
}

As I said, these are default properties. You should receive the following results. jsFiddle here It would be better just to remove display:block as opposed to merely overwriting it.

Share