CSS-Kniffliges zum Wochenende

[Gunnar Bittersmann]

@@Gunnar Bittersmann

So, jetzt auch in Safari. Browser, die text-align-last: justify nicht unterstützen, bekommen ein header::after-Pseudoelement, damit die Zeile mit Überschrift und Button nicht die letzte ist.

Braucht man gar nicht …

Die Liste dann nicht display: flex, sondern inline-flex.

… wenn die Liste inline-flex bleibt, also zum Ausblenden nicht auf none gesetzt wird. Dann ist die Liste die letzte Zeile und man braucht für die Zeile mit Überschrift und Button kein text-align-last: justify.

display: none bekommen die List-Items verpasst. Die Liste wird per visibility: hidden ausgeblended – oder auch gar nicht, dann aber border: none.

header { padding-bottom: 0 }; den Abstand bekommt die Liste – fertig!

LLAP 🖖