J'apprends CSS ces jours-ci. Je concevons une barre NAV en utilisant CSS Flexbox. Voici mon code HTML et CSS, mais ils ne fonctionnent pas sur mon navigateur. Quelqu'un peut-il trouver un problème?
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Page</title>
<link rel="stylesheet" href="/originals/style.css">
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#services-container">Services</a></li>
<li class="item"><a href="#client-section">Our Clients</a></li>
<li class="item"><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</body>
</html>3 Réponses :
L'affichage: la propriété flex s'applique uniquement aux éléments En d'autres termes - La barre de navigation applique l'affichage Fléchissez uniquement la div contenant l'image de l'image et l'UL. Afin d'aligner et de respecter les éléments de la liste - les besoins UL doivent également être un conteneur Flex. J'utilise de l'espace pour entendre les éléments de la liste - mais évidemment, vous devrez peut-être modifier le style pour répondre à vos besoins. P> p>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#services-container">Services</a></li>
<li class="item"><a href="#client-section">Our Clients</a></li>
<li class="item"><a href="#contact">Contact Us</a></li>
</ul>
</nav>
Je ne suis pas sûr de ce que vous essayez d'atteindre, je suppose que vous avez besoin de tous les articles de la barre NAVAL répartis sur une ligne horizontale au-dessus de la page. Si c'est ce dont vous avez besoin, quelques indications:
Le problème principal est que Vous utilisez la propriété Vous devez essayer la propriété La propriété affichage: flex ne distribuera que les enfants immédiats de la boîte avec cette propriété. Dans votre cas, cela signifie que vos éléments Flex sont le logo div et le ul dans son ensemble, et il ne distribuera pas les éléments à l'intérieur du ul . Pour atteindre ce dernier effet, vous devrez également définir l'affichage ul sur Flex.
Align-items pour configurer l'alignement des éléments Flex, mais cette propriété aligne les éléments dans la direction Align-items: Centre les aligne dans Centre verticalement , de haut en bas. Vous ne remarquerez pas ses effets ici car votre conteneur par défaut a la même hauteur que son contenu. Les éléments ne peuvent donc pas être attribués différentes positions verticales. Mais si vous spécifiez une plus grande hauteur pour votre conteneur Flex, vous remarquerez que tous les éléments Flex apparaîtront au milieu de la hauteur du conteneur Flex; Cela pourrait être utile dans le conteneur de flex externe pour aligner les éléments UL au milieu de la hauteur du logo.
justifier le contenu pour aligner vos éléments flexibles dans le même sens de votre conteneur flex, dans ce cas horizontalement. Essayez de vérifier différentes valeurs de cette propriété, telles que espace-autour ou espace-uniflysement pour obtenir la distribution dont vous avez besoin.
top n'est pas nécessaire ici, sauf si vous l'utilisez avec un élément positionné. Vous devez l'utiliser avec une certaine valeur pour la propriété .
Merci monsieur ... j'apprends ... Tellement merci pour ces beaux et forts mots.
Un CSS Flexbox gère la ligne et l'alignement des colonnes d'éléments d'enfants directs au parent dans lequel Flexbox a été appliquée. Par exemple, dans votre code:
Définir ne fonctionne pas