Disposer les éléments

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 73 sur 76.

Défi

Facile

Pratiquons flexbox pour créer une barre de navigation horizontale simple. Utilisez CSS pour styliser le menu afin qu'il corresponde au design de l'image ci-dessous.

Suivez les étapes ci-dessous :

Définissez la barre de navigation comme un conteneur flex.
Ajoutez de l'espacement entre les liens.
1. Utilisez justify-content: space-around pour répartir les liens uniformément.
Stylisez la barre de navigation.
1. Définissez la couleur d'arrière-plan sur dark blue.
2. Ajoutez du padding pour créer de l'espace autour des liens.
Stylisez les liens de navigation.
1. Sélectionnez les éléments <a>.
2. Définissez la couleur du texte sur white.
3. Supprimez le soulignement par défaut.
4. Définissez la taille de la police sur 18px.
5. Ajoutez un padding de 8px 15px pour un meilleur espacement.

Essayez vous-même

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>