MrMurphy1: Menü horizontal ausrichten

Beitrag lesen

SELF-Forum

Menü horizontal ausrichten

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo

ich möchte eine unsortierte Liste horizontal so ausrichten, dass sie sich über die gesamte Breite des Viewports erstreckt. Der Abstand der Listenpunkte zwischeneinander soll dabei gleich sein.

Unter anderem für solche Wünsche ist das Flexbox-Modell entwickelt worden. Eine Lösung für dich könnte zum Beispiel so aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navi ausrichten</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         margin: 0;
      }
      ul {
         padding: 0.3rem  0.5rem;
         display: flex;
         justify-content: space-between;
      }
      li {
         list-style-type: none;
      }
      a {
         text-decoration: none;
         color: black;
      }
   </style>
</head>
<body>
   <nav>
      <ul>
         <li><a href="#">Banane</a></li>
         <li><a href="#">Kirsche</a></li>
         <li><a href="#">Kiwi</a></li>
         <li><a href="#">Erdbeere</a></li>
         <li><a href="#">Mango</a></li>
         <li><a href="#">Pflaume</a></li>
      </ul>
   </nav>
</body>
</html>

Den Abstand vom linken und rechten Rand kannst du dann mit dem seitlichen margin / padding vom nav-, ul- oder li-Element erreichen, je nachdem, wie deine Seite im Endeffekt aufgebaut ist. Ich habe mal einen seitlichen Abstand vom 0.5rem vorgegeben.

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln