CODEWITHSUNDEEP
htmlcssradio-button
floyd
floyd

Reputation: 131

Radio Button Alignment Issues

How do I bring my radio buttons closer to the labels?

input[type="radio"]{
   float: left;
   width: auto;
   margin-left: 3em;
}

<fieldset id="payment_method">
<legend>Payment Method</legend>
<input type="radio" name="payment_method"value="Bill Me">
<label for= "payment1"> Bill Me</label>
<input type="radio" name="payment_method"value="Bill Me">
<label for= "payment2">Credit Card</label>
</fieldset>

Upvotes: 0

Views: 181

Answers (3)

Kristen Grote
Kristen Grote

Reputation: 2777

I like wrapping my input/label pairs in a <div> for easier styling. After that you could just remove the line break between the label and input tags:

<fieldset id="payment_method">
  <legend>Payment Method</legend>
  <div class="fieldgroup">
    <input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">Bill Me</label>
  </div><!--/.fieldgroup-->
  <div class="fieldgroup">
    <input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
  </div><!--/.fieldgroup-->
</fieldset>

It's not terribly pretty, but it is the most cross-browser compatible solution, since each browser treats inline-block spacing differently.

Or, if you want to keep your code tidy, you can use floats like you tried originally:

CodePen

input[type='radio'],
label {
  float: left;
}
.fieldgroup:after {
  content: "";
  display: block;
  clear: both;
}

Upvotes: 0

Rahil Wazir
Rahil Wazir

Reputation: 10142

Just don't apply any rules to your radio input. As all form elements are non Block-level elements (excluding form itself) so you don't need to float them (in your case) and remove the extra margin. See the fiddle

input[type="radio"] {
    /* No styling */
}

Upvotes: 0

Charles
Charles

Reputation: 437

You do not need to float your inputs, you can just give the labels a negative margin instead like so:

label {
margin-left: -1px;
}

Upvotes: 1

Related Questions