Reputation: 131
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
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:
input[type='radio'],
label {
float: left;
}
.fieldgroup:after {
content: "";
display: block;
clear: both;
}
Upvotes: 0
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
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