Druckbare Version
Hallo an alle,
wie bekomme ich die Label bei einem Radio-Button eingerückt, wenn diese lang sind und sich mehrzeilig umbrechen?
Anhang 24103
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". :o
Bei CSS Problemen bitte einen Link zur Problemseite posten.
Spontan ohne den konkreten Code zu sehen und ohne Test würde mir Flexbox einfallen.
Moin Jens,
dann versuch mal damit: https://developer.mozilla.org/de/doc...SS/white-space
In deinem Fall mit dem Wert "nowrap".
Oh, Entschuldigung bitte. :oZitat:
Zitat von mlweb
www.maybebop-gruesst.de/#bestellung
@cliffparnitzky
Wenn der Text tatsächlich zu lang ist wird das wohl eher nicht die Lösung sein.
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é
mit display:table gehts auch
HTML-Code:input[type="radio"] + label{display:table; line-height:150%; padding-left:1em;}
und bisserl besser noch ausrichtenHTML-Code:input[type="radio"] {
float: left;
margin-top: 6px;}
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.
Code:// 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;
}
Besten Dank, das hat es für mich gebracht. ;)Zitat:
Zitat von tintifax