How can I get input radio elements to horizontally align?

Question

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.

Answer 1

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.

Answer 2

This also works like a charm

<form>      <label class="radio-inline">        <input type="radio" name="optradio" checked>Option 1      </label>      <label class="radio-inline">        <input type="radio" name="optradio">Option 2      </label>      <label class="radio-inline">        <input type="radio" name="optradio">Option 3      </label>    </form>