Mehrzeilige Labels nach Radiobuttons einrücken

[Jens Pielawa]

Hallo an alle,

wie bekomme ich die Label bei einem Radio-Button eingerückt, wenn diese lang sind und sich mehrzeilig umbrechen?

radio.jpg

Ich habe einiges mit float oder block ausprobiert, aber keinen Erfolg. Im Grund sollen die Label sich quasi linksbündig verhalten und nicht den Radiobutton "unterkriechen".

[mlweb]

Bei CSS Problemen bitte einen Link zur Problemseite posten.
Spontan ohne den konkreten Code zu sehen und ohne Test würde mir Flexbox einfallen.

[cliffparnitzky]

Moin Jens,

dann versuch mal damit: https://developer.mozilla.org/de/doc...SS/white-space

In deinem Fall mit dem Wert "nowrap".

[Jens Pielawa]

Bei CSS Problemen bitte einen Link zur Problemseite posten.
Spontan ohne den konkreten Code zu sehen und ohne Test würde mir Flexbox einfallen.

Oh, Entschuldigung bitte.
www.maybebop-gruesst.de/#bestellung

[mlweb]

@cliffparnitzky
Wenn der Text tatsächlich zu lang ist wird das wohl eher nicht die Lösung sein.

[Fehrmann]

Hallo,

ich habe mir bei Radio-/Checkboxen angewöhnt, das Input-Feld absolut zu positionieren und dann dem Label ein Abstand nach links zu geben. Alternativ bieten sich sicher auch display: flex; für das umliegende span-Element an.

Viele Grüße
René

[tintifax]

mit display:table gehts auch

input[type="radio"] + label{display:table; line-height:150%; padding-left:1em;}

input[type="radio"] {
    float: left;
    margin-top: 6px;}

und bisserl besser noch ausrichten

[mlweb]

Mit display: flex; auf dem umgebenden span und Erhöhung von line-height für label geht das prinzipiell. Jetzt musst Du noch schauen, ob es browserübergreifend überall klappt (getestet habe ich im Firefox). Gerade bei Formularelementen bin ich immer sehr vorsichtig, die Verhalten sich in den Browsern doch sehr unterschiedlich. Außerdem musst Du natürlich schauen, dass Du dass span-Tag so ansprichst, dass Du nicht eventuell Nebenwirkungen an anderer Stelle bekommst. Also ggf. für dieses Formular eine eigene Klasse verwenden.

// Flex verwenden für span in radio_container
.radio_container span {
    display: flex;
}
// Zeilenhöhe für label erhöhen
.radio_container label {
    line-height: 1.5;
}

// für die Legend Flex zurücksetzen
.radio_container legend span {
    display: inline;
}

[Jens Pielawa]

mit display:table gehts auch

Besten Dank, das hat es für mich gebracht.