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

Answer 1

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

Always
Never
Cost Change

---

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

Always


Never


Cost Change

..or wrap the elements around the elements directly: (example)

    Always


    Never


    Cost Change

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