Text in einer Navigationsliste zentrieren

[franzsen]

Ich habe beispielsweise folgenden verschachtelten Navigator:

<ul>
  <li><a href="#">Zeile 1</a></li>
  <li><a href="#">Zeile 2</a>
    <ul>
      <li><a href="#">Unterzeile 1</a></li>
    </ul>
  </li>
  <li><a href="#">Zeile 3</a></li>
</ul>

Wenn ich die "Zeile 1-3" zentrieren, aber "Unterzeile 1" links anordnen möchte, komme ich zu keine Lösung.
Sind nicht "Zeile 1-3" Geschwister bzw. Kinder von "ul", während "Unterzeile 1" Kind "ul ul" bzw. Nachfahre von "ul" ist?

[Gunnar Bittersmann]

@@franzsen

Wenn ich die "Zeile 1-3" zentrieren, aber "Unterzeile 1" links anordnen möchte, komme ich zu keine Lösung.

Wenn du deinen Versuch (den CSS-Code) zeigen würdest, könnte man dir vielleicht helfen. Verlinke bitte deine Seite.

LLAP 🖖

[franzsen]

Wenn du deinen Versuch (den CSS-Code) zeigen würdest, könnte man dir vielleicht helfen. Verlinke bitte deine Seite.

Der link hier:
Habe es mit Kindselektor vom ersten "ul" stehen, habe es aber auch mit den anderen Kombinatoren versucht.

[November]

Hallo Franz,

nav ul ul li {
    text-align: left;
}

könnte helfen…

[franzsen]

Hallo Franz,

nav ul ul li {
    text-align: left;
}

könnte helfen…

Hat tatsächlich geholfen. Damit kann ich auch den Kindeslektor ">" weglassen:

nav ul li {
	text-align: center;
	}
nav ul ul li {
	text-align: left;
	}

Ich dachte man braucht nur mit Kindselektor auszuwählen und schließt somit alle andere aus. Scheint in diesem Fall aber nicht zuzutreffen.
Wird also ein Listenelement "<li>" zentriert und nicht der Text von "a"?

P.S.:
Das Menü habe ich mit flex gestaltet. Schön langsam habe ich auch das im Griff. Natürlich fehlt noch die Praxis. Damit fehlt auch die Gestaltungsvielfalt wie man es noch machen könnte. Auch die Farbenauswahl braucht noch Erfahrung.

[marctrix]

Hej franzsen,

nav ul ul li {
    text-align: left;
}

könnte helfen…

Hat tatsächlich geholfen. Damit kann ich auch den Kindeslektor ">" weglassen:

nav ul li {
	text-align: center;
	}
nav ul ul li {
	text-align: left;
	}

Ich dachte man braucht nur mit Kindselektor auszuwählen und schließt somit alle andere aus. Scheint in diesem Fall aber nicht zuzutreffen.

Weil es vererbt wird.

Wird also ein Listenelement "<li>" zentriert und nicht der Text von "a"?

Wenn du a als Blockelement darstellen lässt, ist das für deinen Fall sogar die einfachere Methode:

nav > ul > li > a {
	display: block;
	text-align: center;
}

Führt dazu, dass alles innerhalb von a zentriert wird. Da der Link keine weiteren Kinder hat, an die er etwas vererben könnte, betrifft es auch nur die erste Ebene. ;-)

Gruß,

Marc

[Franz]

Wenn du a als Blockelement darstellen lässt, ist das für deinen Fall sogar die einfachere Methode:

nav > ul > li > a {
	display: block;
	text-align: center;
}

Führt dazu, dass alles innerhalb von a zentriert wird. Da der Link keine weiteren Kinder hat, an die er etwas vererben könnte, betrifft es auch nur die erste Ebene. ;-)

Alles klar.

Jetzt würde mich noch interessieren ob man auch header fixieren kann, die Flexboxen enthalten?
In meinem Fall habe ich

<header>
  <nav>
    <ul>
      <li>
      </li>
      ...
    </ul>
  </nav>
</header>

Mit CSS habe ich ul als Flexbox festgelegt.

nav ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  }

Wenn ich nun "header" mit

header {
  position: fixed;
  }

festlege, müßte es eigentlich nur den header betreffen und nicht den Inhalt? Leider schmeißt es mir die ganze Formatierung der Navigationsleiste durcheinander. Gibt es die Möglichkeit Container zu fixieren die Flexboxen enthalten?

Der link hier:

LG
Franz