How can I get input radio elements to horizontally align?

I want these radio inputs to stretch across the screen, rather than one beneath the other:

HTML

<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change

CSS

input[type="radio"] { margin-left:10px; }

http://jsfiddle.net/clayshannon/8wRT3/13/

I’ve monkeyed around with the display properties, and googled, and bang (bung? binged?) for an answer, but haven’t found one.


solution

In your case, you just need to remove the line breaks (<br> tags) between the elements - input elements are inline-block by default (in Chrome at least). (updated example).

<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change

I’d suggest using <label> elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>’s for attribute with the <input>’s id: (example)

<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>


<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>


<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>

..or wrap the <label> elements around the <input> elements directly: (example)

<label>
  <input type="radio" name="editList" value="always"/>Always
</label>
<label>
  <input type="radio" name="editList" value="never"/>Never
</label>
<label>
  <input type="radio" name="editList" value="costChange"/>Cost Change
</label>

You can also get fancy and use the :checked pseudo class.