Je mets en place ce qui devrait être une simple barre de navigation et un style avec une boîte flexible. Pour une raison quelconque, au lieu de s'afficher sous forme de ligne (horizontale), elle s'affiche sous forme de colonne (verticale).
Je peux rendre les liens horizontaux en utilisant float: left, mais ils ne s'étirent pas uniformément pour remplir le barre de navigation.
Je crois comprendre que flex-grow: 1 devrait faire en sorte que chaque élément occupe une quantité égale d'espace . Mais cela ne se produit pas.
Il y a quatre déclarations qui ne fonctionnent pas comme prévu:
flex-direction Les liens dans la barre de navigation est dans une colonne au lieu d'une ligne
padding Bien que le padding de la barre de navigation soit mis à zéro, il semble toujours avoir un padding
text-align Le texte de chaque
flex-grow Les liens ne sont pas espacés uniformément
Je ne sais pas s'ils proviennent tous de à un problème, ou chaque problème distinct.
Voici un extrait de code simplifié:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav a {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center; /* not working */
flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
</style>
</head>
<body>
<nav>
<ul>
<a href="#"><li>Once</li></a>
<a href="#"><li>Upon</li></a>
<a href="#"><li>A Time</li></a>
<a href="#"><li>There</li></a>
<a href="#"><li>Was</li></a>
<a href="#"><li>A Problematic</li></a>
<a href="#"><li>Nav Bar</li></a>
</ul>
</nav>
</body>
</html>
J'ai utilisé la boîte flexible de nombreuses fois auparavant, mais je ne l'ai jamais vue se comporter comme ça.
5 Réponses :
Vous pouvez également essayer de donner display: flex à nav ul.
nav ul {
display: flex;
}
Maintenant, les éléments apparaissent dans une ligne au lieu d'une colonne.
Par défaut, ul est un élément de bloc, donc l'affichage sera bloqué pour ul.
flex sur ul et non sur nav (vous devez définir flex sur le DOM wrap de vous éléments que vous voulez qu'ils flex ) ul et immédiatement li pas a ( ul li a ) li >
<nav>
<ul>
<li>
<a href="#">Once</a>
</li>
<li>
<a href="#">Once</a>
</li>
<li>
<a href="#">Once</a>
</li>
<li>
<a href="#">Once</a>
</li>
<li>
<a href="#">Once</a>
</li>
</ul>
</nav>
ul {
display: flex;
flex-direction: row;
background-color: #d2d6d6;
padding: 0;
}
nav li {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center;
flex-grow: 1;
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
dites-moi pour plus d'aide
Il y a une petite erreur dans votre code, voici la correction, Vous avez donné toutes les propriétés à Nav, alors que vous devez les attribuer à UL,
<nav> <ul> <li><a href="#">Once</a></li> <li><a href="#">Upon</a></li> <li><a href="#">A Time</a></li> <li><a href="#">There</a></li> <li><a href="#">Was</a></li> <li><a href="#">A Problematic</a></li> <li><a href="#">Nav Bar</a></li> </ul> </nav>
nav ul {
display: flex;
text-decoration: none;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav li {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
justify-content: center;
flex-grow: 1;
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
et encore une chose, Li doit être l'enfant direct d'UL pas d'ancrage.
Merci. C'était la réponse la plus clairement expliquée et m'a aidé à comprendre la source du problème principal. Vous avez également abordé les problèmes de remplissage et de centrage du texte, j'accepte donc la vôtre comme la meilleure réponse. (Merci à tous ceux qui ont répondu!)
J'ai modifié l'extrait pour que le style hover et text-decoration: none soient maintenant correctement ciblés également.
(Si vous vous posez la question, cette modification est actuellement en attente d'examen. Supprimera ce commentaire une fois qu'il aura été examiné et sera visible par tous.)
Quelque chose que je devais rechercher (et je publierai ici au cas où d'autres le trouveraient utile), c'est comment rendre les éléments provoque la rupture de la mise en page. Ajoutez simplement un événement onclick . stackoverflow.com/a/16582588/2454914 Ceci combiné avec le style du survol sur le (pas le ) et l'ajout de cursor: pointer au
Dans nav a {...} remplacez display: flex; out of display: inline-flex;
Voici le effet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav a {
display: inline-flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center; /* not working */
flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
</style>
</head>
<body>
<nav>
<ul>
<a href="#"><li>Once</li></a>
<a href="#"><li>Upon</li></a>
<a href="#"><li>A Time</li></a>
<a href="#"><li>There</li></a>
<a href="#"><li>Was</li></a>
<a href="#"><li>A Problematic</li></a>
<a href="#"><li>Nav Bar</li></a>
</ul>
</nav>
</body>
</html>
Vous apportez un simple changement de la
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav ul {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav a {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center; /* not working */
flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
</style>
</head>
<body>
<nav>
<ul>
<a href="#"><li>Once</li></a>
<a href="#"><li>Upon</li></a>
<a href="#"><li>A Time</li></a>
<a href="#"><li>There</li></a>
<a href="#"><li>Was</li></a>
<a href="#"><li>A Problematic</li></a>
<a href="#"><li>Nav Bar</li></a>
</ul>
</nav>
</body>
</html>
nav ul {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}