Radiobutton und Text auf gleicher Höhe

[Samuel Vogel]

Hey Leute,

Ich würde gerne folgenden Radio Button und den Text daneben auf gleicher Höhe anzeigen lassen. Im Moment ist es so, dass der Radiobutton etwas höher als der Text ist!

<div class="agreement">
    <input type="radio" name="proposal" value="agreement">
    Hier ein bisschen Text!
</div>

Ich dachte eigentlich das geht mit "display: inline;", aber da erinnere ich mich anscheinend falsch!

so long,
Samy

[Gunnar Bittersmann]

Hello out there!

Radio Button

Autsch!

Radiobutton

Das sieht doch gleich besser aus.

etwas höher als der Text ist!

Bei der bei dir eingestellten Schriftgröße. Wie sieht es bei anderen aus? (Wie groß die Schrift beim Nutzer angezeigt wird, kannst bestenfalls erahnen.)

<div class="agreement">
    <input type="radio" name="proposal" value="agreement">
    Hier ein bisschen Text!

Das "bisschen Text" möchte gern ein Label sein?

"Beim Klick auf den Inhalt eines Labels […] wird in aktuellen Browsern das Formularelement fokussiert bzw. ausgewählt, auf das sich das Label bezieht. Diese Funktion erleichtert unter anderem die Auswahl von Checkboxen." Und von Radiobuttons.

Ich dachte eigentlich das geht mit "display: inline;", aber da erinnere ich mich anscheinend falsch!

Ja, 'display: inline' ist sowieso der Defaultwert für 'input'.

Wenn's denn sein muss: relative Positionierung.

See ya up the road,
Gunnar

[Samuel Vogel]

Danke für den Tipp mit den Labels.
Wie man das ganze jedoch mit relativer Positionierung hinbekommt, blick ich immer noch nicht ganz. Ich habe es nun mit einem "float: left;" gelöst!

Danke nochmal!

[Gunnar Bittersmann]

Hello out there!

Wie man das ganze jedoch mit relativer Positionierung hinbekommt, blick ich immer noch nicht ganz.

.agreement input  
{  
  position: relative;  
  top: 42px;  
}

Wie groß die Verschiebung sein soll, musst du selbst probieren. Evtl. auch nicht in px, sondern relativ zur Schriftgröße in em angeben.

See ya up the road,
Gunnar