Question

How do I create a form where there are several radio buttons on the same line? I can only seem to get them to display vertically, one below the other. I have limited experience with HTML/CSS/RoR.

Answer 1

This can be achieved by wrapping them in an element with display style inline.

For instance,​

<div style="display:inline">
    <input type="radio" name="example" id="radio1" />
    <label for="radio1">Radio 1</label>
    <input type="radio" name="example" id="radio2" />
    <label for="radio2">Radio 2</label>
    <input type="radio" name="example" id="radio3" />
    <label for="radio3">Radio 3</label>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Will look like this:

o Radio 1 o Radio 2 o Radio 3