Dev Faq
0
votes

Divers espace entre Flex Article

J'essaie de mettre divers espace entre le logo et le menu dans l'en-tête, à l'aide de Affichage: flex code> puis justify-contenu: flex-extr k code> au menu et flex-start code> au logo mais cela ne fonctionne pas.

I Utilisateur Affichage: flex code> et align-items: Centre code> sur l'en-tête pour avoir tout l'élément sur l'en-tête aligné. Mais maintenant, je dois placer le menu à la fin et le logo au début. P>

p> 

<!DOCTYPE html>
<html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <title>Title</title>
</head>
<body>
    <header class="header" role="banner">
            <div class="logo-holder">
                <a href="#"><h1 class="logo">LOGO</h1></a>
            </div>
            <nav>
                <ul class="BarMenu">
                    <a href="#"><li>text</li></a>
                    <a href="#"><li>text</li></a>
                    <a href="#"><li></li>text</a>
                    <a href="#"><li>text</li></a>
                    <a href="#" class="Start"><li>text</li></a>
                </ul>
            </nav>
    </header>
</body>
</html>

0 commentaires

3 Réponses :

0
votes

Ajouter Justify-Contenu: espace-entre; code> à l'en-tête.

p> 

<!DOCTYPE html>
<html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<head>
  <title>Title</title>
</head>

<body>
  <header class="header" role="banner">
    <div class="logo-holder">
      <a href="#">
        <h1 class="logo">LOGO</h1>
      </a>
    </div>
    <nav>
      <ul class="BarMenu">
        <a href="#">
          <li>text</li>
        </a>
        <a href="#">
          <li>text</li>
        </a>
        <a href="#">
          <li></li>text</a>
        <a href="#">
          <li>text</li>
        </a>
        <a href="#" class="Start">
          <li>text</li>
        </a>
      </ul>
    </nav>
  </header>
</body>

</html>

1 commentaires

Nous disons Un problème pas UNE probleme ;)

0
votes

Il vous suffit d'écrire: 

header {
       display: flex;
       justify-content: space-between;
       }

0 commentaires
0
votes

@khalil Karim: espérons que cela aide!

p> 

<!DOCTYPE html>
<html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <title>Title</title>
</head>
<body>
    <header class="header" role="banner">
            <div class="logo-holder">
                <a href="#"><h1 class="logo">LOGO</h1></a>
            </div>
            <nav>
                <ul class="BarMenu">
                    <a href="#"><li>Home</li></a>
                    <a href="#"><li>About Us</li></a>
                    <a href="#"><li></li>Services</a>
                    <a href="#"><li>Blog</li></a>
                    <a href="#" class="Start"><li>Contact Us</li></a>
                </ul>
            </nav>
    </header>
</body>
</html>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor