Radio buttons not lining up horizontally

My HTML radio buttons are lining up vertically not horizontally. Also, the text for each of them is not right beside the button like I wish it would be.

  <legend>Payment Method</legend>
  <input type="radio" name="payment_type" value="bill"/>
  <label for="bill">Bill Me</label>
  <input type="radio" name="payment_type" value="credit" checked/>
  <label for="credit">Credit Card</label>
  <input type="radio" name="payment_type" value="paypal"/>
  <label for="paypal">Paypal</label>

That is the code for my HTML buttons. I have an external style sheet, but I have not implemented any styling for the buttons as of now.


Checkboxes are aligned horizontally by default, as are the labels. You must be setting display:block on an element. Either remove that, or overwrite it by applying display:inline-block.

Try the following CSS:

input[type="radio"] {
label {

As I said, these are default properties. You should receive the following results. jsFiddle here It would be better just to remove display:block as opposed to merely overwriting it.