Gunnar Bittersmann: Umbruch verhindern

Beitrag lesen

@@Merlin S

bei ausreichender Breite alles von A bis D in einer Zeile stehen

Darüber reden wir noch mal.

und wenn es zu schmal wird soll der Umbruch bei B und nicht bei C erfolgen.

Dazu musst du wohl Label und Eingabefeld in einem Element gruppieren (p oder div), welches auf display: inline gesetzt wird: Beispiel 1.

Die Trennlinie ist mit border gemacht. Die sieht aber beim Umbruch auf schmalen Viewports fehl am Platz aus. Bei genügendem Abstand brauchst du die auch nicht.

Dann ist die Lösung mit Flexbox die bessere Wahl, da man den Abstand dann mit gap machen kann: Beispiel 2.


Generell sollte man aber Eingabefelder nicht nebeneinander, sondern untereinander platzieren. Und die Labels über die Eingabefelder, nicht daneben.

🖖 Живіть довго і процвітайте

--
Ad astra per aspera