Border-Bottom länger als gewollt

[Rolf B]

Hallo Andreas,

das Problem ist, dass Du dein HTML falsch schachtelst.

<div id="menu">
   <ul>
      <a href="./index.html">
         <e>
            <li>Home</li>
         </e>
      </a>
<!-- ... -->
      <a>
         <e tabindex="0" aria-current="page">
            <li>Kontakt</li>
         </e>
      </a>
   </ul>
</div>

Problem 1: li Elemente gehören direkt ins ul Element, nicht als Kinder weiterer Zwischenelemente.

Problem 2: Ein e Element gibt es nicht. Der Browser behandelt es im Prinzip wie einen span. Und weil Du nun in deinem a Element inline-content hast, werden Zeilenumbrüche zu Leerstellen, und als Leerstellen formatiert. Dieser Unterstrich kommt von der Unterstreichung, die der Browser jedem Link zuordnet. Die schaltest Du erst im e Element ab, daher ist sie für den Leerraum um das e herum vorhanden.

Aber zunächst einmal solltest Du dein HTML richtig strukturieren und auf unnötige Elemente verzichten. Folgendes HTML genügt:

<nav>   <!-- statt <div id="menu"> -->
   <ul>
      <li><a tabindex="0" aria-current="page">Home</a></li>
      <li><a href="./geodaetischeBerechnungen.html">Geo</a></li>
      <li><a href="./kontakt.html">Kontakt</a></li>
      <li><a href="./impressum.html">Imp</a></li>
   </ul>
</nav>

Die tabindex=0 aria-current=page Attribute setzt du direkt auf das a Element dieser Seite.

Es ist auch durchaus ok, mit flexbox zu arbeiten, womit Du in deinem Stylesheet schon experimentiert hast; du musst display:flex und justify-content:space-between lediglich auf das ul Element legen, dann werden die li per Flexbox verteilt. Zusätzlich solltest Du dem UL Element noch explizites Padding geben (z.B. padding: 0 2em), sonst hast Du das Default-Padding von UL - das ist nur links.

Ich habe ein bisschen gefiddelt, wirf mal einen Blick darauf.

Rolf