Browsing the archives for the radio-button tag.


Tipp: Radio-Button und Text auf gleicher Höhe UPDATE

CSS, HTML, Webentwicklung
Ziel: Gleiche Höhe

Ziel: Gleiche Höhe

Ziel ist es einen Radio-Button bzw. Checkbox zu erstellen. Daneben wird ein Beschreibungstext angezeigt, der auf gleicher Höhe angezeigt wird.

Es wird folgender HTML-Code verwendet:

<input type="checkbox" id="test" />
<label for="test">Gleiche Höhe</label>
Nicht auf gleicher Höhe

Nicht auf gleicher Höhe

Wenn dieser Code verwendet wird, sieht das Ergebnis jedoch nicht so aus, wie es angedacht ist.

Um das Problem zu lösen, reicht folgende CSS-Eigenschaft:

input {
    vertical-align: bottom;
}

Mit dieser kleinen Änderung wird nun der Text direkt neben dem Radio-Button bzw. neben der Checkbox angezeigt.

Update

IE-Kompatibel

4 Kommentare