CSS: Wie ändere ich den Abstand zwischen Optionsfeld und Text?

Question

Wie ändere ich den Abstand zwischen Radiobutton und seinem Text?

Ich habe folgende HTML:

<input type="radio" name="beds" value="1" />1+ 
<input type="radio" name="beds" value="2" />2+ 

die so etwas wie diese Grafik erzeugt:

o 1+ o 2+ 

Wie kann ich den Abstand zwischen dem Optionsfeld ändern und dem "1+" text? Ich möchte, dass der Text näher an den Radioknopf ist, aber der Browser fügt ein bestimmtes über undefined Padding zwischen den zwei Elementen ein.

Answer 1

Viele HTML-Elemente haben eine Standardrandeinstellung. Sie können dies außer Kraft setzen und es auf 0 In Ihrem Fall gesetzt, möchten Sie margin-right auf das Optionsfeld zurück:

<input type="radio" name="beds" value="1" style="margin-right: 0" />1+ 

Sie wollen wahrscheinlich es zu Ihrem Stylesheet hinzuzufügen, so dass sie für alle Optionsfelder gilt:

input[type="radio"] { 
    margin-right: 0; 
} 

Answer 2

Sie benötigen das Element label.

<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label> 
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label> 

Anschließend können Sie dies wie dieser Art:

label { 
    margin-left: -3px; 
} 

auch die Verwendung der für die Zugänglichkeit Zwecke for Attribut beachten.