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.

Withdrawal

You could start by removing the line breaks in between them. Then maybe try float: left; or something if they're still not inline. – Oisin

@Oisin - no need to float them, they're inline by default. – Rim

@Rim yea, I realized I didn't say all of what I intended haha. I was thinking that he might be having an issue because of a predefined style or something, so I was saying to float it if removing the line breaks didn't work. – Oisin

You really should use the label element, it helps to reduce ambiguity (which text is for which control?) – Sexennial

@cimmanon: Y? At the jsfiddle you can see there is no ambiguity, unless your comment is ambiguous to me. – Withdrawal

Except they are ambiguous to the user once they're placed inline and once there are more of them. Radios (and checkboxes) without labels have too small of an activation area to hit accurately for many users. – Sexennial

... you bong for an answer ... – Syndrome

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.

Hsinking

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>

Protectionist

Answer 3

To get your radio button to list horizontally , just add

RepeatDirection="Horizontal"

to your .aspx file where the asp:radiobuttonlist is being declared.

Sita

Answer 4

Here is updated Fiddle

Simply remove </br> between input radio's

<div class="clearBoth"></div>
<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
<div class="clearBoth"></div>

Thermosphere