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.

User · Answer

To get your radio button to list horizontally   just add  RepeatDirection  Horizontal    to your  aspx file where the asp radiobuttonlist is being declared

User · Answer

This also works like a charm   x000D   x000D   lt form gt  x000D       lt label class  radio-inline  gt  x000D         lt input type  radio  name  optradio  checked gt Option 1 x000D       lt  label gt  x000D       lt label class  radio-inline  gt  x000D         lt input type  radio  name  optradio  gt Option 2 x000D       lt  label gt  x000D       lt label class  radio-inline  gt  x000D         lt input type  radio  name  optradio  gt Option 3 x000D       lt  label gt  x000D     lt  form gt  x000D   x000D   x000D

User · Answer

In your case  you just need to remove the line breaks   lt br gt  tags  between the elements - input elements are inline-block by default  in Chrome at least    updated example     lt input type  radio  name  editList  value  always  gt Always  lt input type  radio  name  editList  value  never  gt Never  lt input type  radio  name  editList  value  costChange  gt Cost Change     I d suggest using  lt label gt  elements  though  In doing so  clicking on the label will check the element too  Either associate the  lt label gt  s for attribute with the  lt input gt  s id   example    lt input type  radio  name  editList  id  always  value  always   gt   lt label for  always  gt Always lt  label gt    lt input type  radio  name  editList  id  never  value  never   gt   lt label for  never  gt Never lt  label gt    lt input type  radio  name  editList  id  change  value  costChange   gt   lt label for  change  gt Cost Change lt  label gt      or wrap the  lt label gt  elements around the  lt input gt  elements directly   example    lt label gt       lt input type  radio  name  editList  value  always   gt Always  lt  label gt   lt label gt       lt input type  radio  name  editList  value  never   gt Never  lt  label gt   lt label gt       lt input type  radio  name  editList  value  costChange   gt Cost Change  lt  label gt    You can also get fancy and use the  checked pseudo class

User · Answer

Here is updated Fiddle  Simply remove  lt  br gt  between input radio s   lt div class  clearBoth  gt  lt  div gt   lt input type  radio  name  editList  value  always  gt Always  lt input type  radio  name  editList  value  never  gt Never  lt input type  radio  name  editList  value  costChange  gt Cost Change  lt div class  clearBoth  gt  lt  div gt

[html] How can I get input radio elements to horizontally align?

The answer is

Examples related to html

Examples related to css

Examples related to input

Examples related to radio-button

Tags