Trenne niemals st...

[Rolf B]

Hallo Matthias,

Das es anders geht, kannst du hier sehen:

da bist Du aber ziemlich im Irrtum. Mach dein Browserfenster mal schmal genug:

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

<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

ul {
  list-style: none;
  padding: 0;
}

li label {
  display: flex;
}
li label input[type=checkbox] {
  margin-top: 0.4em;
  margin-right: 0.5em;
}

Rolf