S'il vous plaît voir codepen Lien . Quelqu'un peut-il repérer le problème, s'il vous plaît?
ouvert aux suggestions sur mon b__e__m style
CCS a été compilé dans SCSS
Veuillez faire défiler plus de mi-chemin sur CSS pour éviter tout Réinitialiser .
numéro : les deux boutons à droite des arrière-plans de navigation et le texte sont hors de synchronisation, par rapport au côté gauche.
3 Réponses :
Le problème est le suivant: Augmentez la largeur de li dans la navigation latérale gauche a Affichage: liste-item; mais li dans la navigation droite a : flex;
.nav__ul - RT à 25% et donnez la propriété correcte à LI sur le côté droit pour l'aligner correctement. Cette observation est basée sur votre mise en page.
Pourquoi ne pas simplement mettre la couleur de fond sur le parent?
p>
<header class="header">
<nav class="header__nav nav">
<span class="nav__img b1">
<img src="./img/plant-logo.png" alt="logo">
</span>
<section class="nav__section nav_section--1 b2">
<ul class="nav__ul nav__ul--lf b3">
<li class="nav__item">
<a href="www.google.com">Home</a>
</li>
<li class="nav__item">
<a href="www.google.com">Product</a>
</li>
<li class="nav__item">
<a href="www.google.com">Learn</a>
</li>
</ul>
<ul class="nav__ul nav__ul--rt b4">
<li class="nav__item">
<a href="www.google.com">Contact</a>
</li>
<li class="nav__item">
<a href="www.google.com"><span>Sign in</span></a>
</li>
</ul>
</section>
</nav>
</header> Supprimer Affichage: Flex de la classe
Utilisation de BEM est votre problème: je vois que vous utilisez
nav__item (b4) etnav_item (B3) dans votre HTML, avec 2 resp. 1 soulignement ... Un inconvénient de BEM, manquez un tiret ou un trait de soulignement et vous pouvez regarder votre code pendant des heures de ne pas voir l'indice. Imaginez CSS / HTML avec des centaines de lignes de code, une chasse heureuse.