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   lt input type  radio  name  editList  value  always  gt Always  lt br gt   lt input type  radio  name  editList  value  never  gt Never  lt br gt   lt input type  radio  name  editList  value  costChange  gt 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

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

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

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?

Examples related to html

Examples related to css

Examples related to input

Examples related to radio-button