Trenne niemals st... bearbeitet von Rolf B 29.10.2019 09:36 Hallo Matthias,> Das es anders geht, kannst du hier sehen:da bist Du aber ziemlich im Irrtum. Mach dein Browserfenster mal schmal genug:[](/images/ab7a3390-fa26-11e9-8512-b42e9947ef30.png)Das Innere eines Labels ist Fließtext. Wenn man erzwingen will, dass Text und Checkbox auf einer Zeile bleiben, kann man per CSS white-space:pre setzen. Dann rutscht der Text aber ggf. aus der Label-Box hinaus und hängt irgendwo rum, wo man ihn nicht haben will, oder wird abgeschnitten.Alternativ macht man aus dem Label eine Flexbox, packt den Labeltext in ein Span und ordnet so Text und Checkbox zwingend nebeneinander. Der Text bricht dann innerhalb des span um und die Checkbox bleibt daneben stehen. Beispiel für Flexbox: <https://jsfiddle.net/wcsh7z8b/>Das steht im Fiddle:HTML~~~html<h2>Ihre köstlichen Pizzazutaten</h2><ul><li><label><input type="checkbox" name="zutat[]" value="sci">Bester Vorderschinken vom Eifelschwein</label></li><li><label><input type="checkbox" name="zutat[]" value="ana">Saftig-süße karibische Ananas</label></li><li><label><input type="checkbox" name="zutat[]" value="ore">Frisch gepflückter Oregano</label></li><li><label><input type="checkbox" name="zutat[]" value="kas">Mozzarellakäse von handgestreichelten Büffelkühen</label></li><li><label><input type="checkbox" name="zutat[]" value="art">Zarte Artischockenherzen</label></li></ul>~~~und CSS~~~cssul { list-style: none; padding: 0;}li label { display: flex;}li label input[type=checkbox] { margin-top: 0.4em; margin-right: 0.5em;}~~~_Rolf_-- sumpsi - posui - clusi
Trenne niemals st... bearbeitet von Matthias Apsel 24.12.2019 07:35 Hallo Matthias,> Das es anders geht, kannst du hier sehen:da bist Du aber ziemlich im Irrtum. Mach dein Browserfenster mal schmal genug:[](/images/ab7a3390-fa26-11e9-8512-b42e9947ef30.png)<label> ist ein inline-Element. Für Zwecke wie diesen kann es sinnvoll sein, es auf display:block zu setzen. Oder, wenn die belabelten Checkboxen in einer Liste stehen, die <li> auf display:block. Oder das <ul> auf display:flex. Jedenfalls nicht einfach Fließtext. Aber das nur am Rande, das löst das Problem nicht.Das Innere eines Labels ist ebenfalls Fließtext. Wenn man erzwingen will, dass Text und Checkbox auf einer Zeile bleiben, kann man per CSS white-space:pre setzen. Dann rutscht der Text aber ggf. aus der Label-Box hinaus und hängt irgendwo rum, wo man ihn nicht haben will, oder wird abgeschnitten.Alternativ macht man aus dem Label eine Flexbox, packt den Labeltext in ein Span und ordnet so Text und Checkbox zwingend nebeneinander. Der Text bricht dann innerhalb des span um und die Checkbox bleibt daneben stehen. Beispiel für Flexbox: <https://jsfiddle.net/wcsh7z8b/>_Rolf_-- sumpsi - posui - clusi
Trenne niemals st... bearbeitet von Rolf B 29.10.2019 09:48 Hallo Matthias,> Das es anders geht, kannst du hier sehen:da bist Du aber ziemlich im Irrtum. Mach dein Browserfenster mal schmal genug:[](/images/ab7a3390-fa26-11e9-8512-b42e9947ef30.png)<label> ist ein inline-Element. Für Zwecke wie diesen kann es sinnvoll sein, es auf display:block zu setzen. Oder, wenn die belabelten Checkboxen in einer Liste stehen, die <li> auf display:block. Oder das <ul> auf display:flex. Jedenfalls nicht einfach Fließtext. Aber das nur am Rande, das löst das Problem nicht.Das Innere eines Labels ist ebenfalls Fließtext. Wenn man erzwingen will, dass Text und Checkbox auf einer Zeile bleiben, kann man per CSS white-space:pre setzen. Dann rutscht der Text aber ggf. aus der Label-Box hinaus und hängt irgendwo rum, wo man ihn nicht haben will, oder wird abgeschnitten.Alternativ macht man aus dem Label eine Flexbox, packt den Labeltext in ein Span und ordnet so Text und Checkbox zwingend nebeneinander. Der Text bricht dann innerhalb des span um und die Checkbox bleibt daneben stehen. Beispiel foür Flgexbox: <https://jsfiddle...net/wcsh7z8b/>_Rolf_-- sumpsi - posui - clusi
Trenne niemals st... bearbeitet von Rolf B 29.10.2019 09:47 Hallo Matthias, da bist Du aber ziemlich im Irrtum. [](/images/ab7a3390-fa26-11e9-8512-b42e9947ef30.png) <label> ist ein inline-Element. Für Zwecke wie diesen kann es sinnvoll sein, es auf display:block zu setzen. Oder, wenn die belabelten Checkboxen in einer Liste stehen, die <li> auf display:block. Oder das <ul> auf display:flex. Jedenfalls nicht einfach Fließtext. Das Innere eines Labels ist ebenfalls Fließtext. Wenn man erzwingen will, dass Text und Checkbox auf einer Zeile bleiben, kann man per CSS white-space:pre setzen. Alternativ macht man aus dem Label eine Flexbox, packt den Labeltext in ein Span und ordnet so Text und Checkbox zwingend nebeneinander. Der Text bricht dann um und die Checkbox bleibt daneben stehen. Beispiel folgt... _Rolf_ -- sumpsi - posui - clusi
nicht angemeldet nicht angemeldet
