单选按钮和文本方向

Question

How can I move the text of a radio button closer to the button itself? When I create a radio button, the button text appears about 10px away from the button, making the horizontal orientation awkward because the text then begins to overlap onto the button to the right.

How can I change the distance of the text from the button?

Answer 1

Note in the below style="margin:0;"

<input type="radio" style="margin:0;" value="radio" id="radio" name="radio" />Some Text

If you want to do this with a class I'd recommend wrapping the radio buttons because type selectors don't work in all browsers:

    <style type="text/css">
      .nomarginradio input{ margin:0; }
    </style>
    <div class="nomarginradio">
      <input type="radio" value="radio" id="radio" name="radio" />Some Text
    </div>

Answer 2

Put a span tag on the text of the input button. and adjust its selectors padding or margin. Some text