@@Anne Kaffeekanne > ...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen, Deshalb ist `ul` auf `display: inline-flex; width: 100%` gesetzt, damit `h1`, `button` und `ul` Inline-Elemente sind, wobei `ul` eine ganze Zeile beansprucht und deshalb `h1` und `button` links bzw. rechts ausgerichtet sind. Damit das auch so bleibt, wird `ul` beim Ausblenden nicht auf `display: none` gesetzt, sondern auf `visibility: hidden` und die `li` auf `display: none`. (Ich denke, das war der Plan; ich hab das aber jetzt nur überflogen.) > so kann ich das nur nach der von Gunnar erdachten Methode mit *text-align: justify* machen (die leider nicht von allen Browsern visuell sauber umgesetzt wird) ?? In welchen denn nicht? > bzw. könnte ich das button-Element mit *position: absolute* komplett aus dem Fluss nehmen Wäre denkbar, wenn die Beschriftung nicht „Ich klappe das Menü auf und zu!“ ist 😉, sondern „Menü“ oder gar nur ein Icon (mit Alternativtext). (Erwähnte ich schon, dass ich das [Hamburger Icon](https://codepen.io/gunnarbittersmann/pen/yZrLXJ) für Menüs für ungeeignet halte?) In dem Fall kannst du die Breite des Buttons ungefähr abschätzen und der Überschrift entsprechendes `padding` geben, damit der Button die Überschrift nicht überdeckt. > übersehe ich vielleicht eine offensichtliche dritte Möglichkeit? Grid – wenn Browser denn `display: contents` vernünftig umsetzen würden. > ...wäre aber eben semantisch nicht mehr sauber, da button ja eigentlich Teil der Navigation ist... Richtig, der `button` muss sich im `nav`-Element befinden, damit er von blinden Screenreader-Nutzern beim Anwählen der Navigation auch gefunden wird. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Anne Kaffeekanne > ...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen, Deshalb ist `ul` auf `display: inline-flex; width: 100%` gesetzt, damit `h1`, `button` und `ul` Inline-Elemente sind, wobei `ul` eine ganze Zeile beansprucht und deshalb `h1` und `button` links bzw. rechts ausgerichtet sind. Damit das auch so bleibt, wird `ul` beim Ausblenden nicht auf `display: none` gesetzt, sondern auf `visibility: hidden` und die `li` auf `display: none`. (Ich denke, das war der Plan; ich hab das aber jetzt nur überflogen.) > so kann ich das nur nach der von Gunnar erdachten Methode mit *text-align: justify* machen (die leider nicht von allen Browsern visuell sauber umgesetzt wird) ?? In welchen denn nicht? > bzw. könnte ich das button-Element mit *position: absolute* komplett aus dem Fluss nehmen Wäre denkbar, wenn die Beschriftung nicht „Ich klappe das Menü auf und zu!“ ist 😉, sondern „Menü“ oder gar nur ein Icon. (Erwähnte ich schon, dass ich das [Hamburger Icon](https://codepen.io/gunnarbittersmann/pen/yZrLXJ) für Menüs für ungeeignet halte?) In dem Fall kannst du die Breite des Buttons ungefähr abschätzen und der Überschrift entsprechendes `padding` geben, damit der Button die Überschrift nicht überdeckt. > übersehe ich vielleicht eine offensichtliche dritte Möglichkeit? Grid – wenn Browser denn `display: contents` vernünftig umsetzen würden. > ...wäre aber eben semantisch nicht mehr sauber, da button ja eigentlich Teil der Navigation ist... Richtig, der `button` muss sich im `nav`-Element befinden, damit er von blinden Screenreader-Nutzern beim Anwählen der Navigation auch gefunden wird. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Anne Kaffeekanne > ...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen, Deshalb ist `ul` auf `display: inline-flex; width: 100%` gesetzt, damit `h1`, `button` und `ul` Inline-Elemente sind, wobei `ul` eine ganze Zeile beansprucht und deshalb `h1` und `button` links bzw. rechts ausgerichtet sind. Damit das auch so bleibt, wird `ul` beim Ausblenden nicht auf `display: none` gesetzt, sondern auf `visibility: hidden` und die `li` auf `display: none`. (Ich denke, das war der Plan; ich hab das aber jetzt nur überflogen.) > so kann ich das nur nach der von Gunnar erdachten Methode mit *text-align: justify* machen (die leider nicht von allen Browsern visuell sauber umgesetzt wird) ?? In welchen denn nicht? > bzw. könnte ich das button-Element mit *position: absolute* komplett aus dem Fluss nehmen Wäre denkbar, wenn die Beschriftung nicht „Ich klappe das Menü auf und zu!“ ist 😉, sondern „Menü“ oder gar nur ein Icon. (Erwähnte ich schon, dass ich das [Hamburger Icon](https://codepen.io/gunnarbittersmann/pen/yZrLXJ) für Menüs für ungeeignet halte?) In dem Fall kannst du die Breite des Buttons ungefähr abschätzen und der Überschrift entsprechendes `padding` geben, damit der Button die Überschrift nicht überdeckt. > übersehe ich vielleicht eine offensichtliche dritte Möglichkeit? Grid – wenn Browser denn `display: contents` vernünftig umsetzen würden. > ...wäre aber eben semantisch nicht mehr sauber, da button ja eigentlich Teil der Navigation ist... Richtig, der `button` muss sich im `nav`-Element befinden. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann