nav Element erzeugt Scrollbalken

[Linuchs]

Moin,

bitte schaut mal hier. Ich habe die vorhandenen Elemente header, nav, main und footer mit display:none ein / ausgeschaltet.

Das nav-Element verursacht den horizontalen Scrollbalken, aber ich kann nicht erkennen, was rechts von diesem Element sein soll.

Was ist da?

Edit: Habe gerade dem ul im nav einen border gegeben. ul ist es ...

Linuchs

[Auge]

Hallo

Das nav-Element verursacht den horizontalen Scrollbalken, aber ich kann nicht erkennen, was rechts von diesem Element sein soll.

Edit: Habe gerade dem ul im nav einen border gegeben. ul ist es ...

genauer gesagt, die widersprüchlichen CSS-Angaben zu float: left;, position: relative; und im speziellen die Angabe left: 50%;.

Tschö, Auge

[Linuchs]

Edit: Habe gerade dem ul im nav einen border gegeben. ul ist es ...

genauer gesagt, die widersprüchlichen CSS-Angaben zu float: left;, position: relative; und im speziellen die Angabe left: 50%;.

Dieses ganze Geschwurbel war mir ohnehin zuwider, aber vor Jahren (?) wurde es mir empfohlen, um floatende Elemente li dennoch zentrieren zu können.

So einfach geht es:

ul.navi {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul.navi li {
 display: inline-block;
 float: left;
 margin-right: .5em;
}

Aber wenn eine Krücke erstmal funktioniert, wird sie jahrelang mitgeschleppt ...

Linuchs

[marctrix]

Hej Linuchs,

So einfach geht es:

ul.navi {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul.navi li {
 display: inline-block;
 float: left;
 margin-right: .5em;
}

Warum float: left?

Marc

[Gunnar Bittersmann]

@@marctrix

ul.navi {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul.navi li {
 display: inline-block;
 float: left;
 margin-right: .5em;
}

Warum float: left?

Warum display: inline-block?

Warum überhaupt eins der beiden?

Ach so: „aber vor Jahren (?) wurde es mir empfohlen“.

Vor Jahren gab’s noch keine Flexboxen.

Heute schon.

LLAP 🖖