Salut j'aimerais savoir pourquoi mon dernier élément <li> avec la class "connexion" ne tiens pas compte de la propriété justify-self: flex-end , je voudrais qu'il puisse se décaler vers la droite sur l'axe X.
Voici le HTML:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <header> <div class="logo"></div> <ul> <li><a href="#">Acceuil</a></li> <li><a href="#">Catalogue</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> <li class="connexion"><a href="#">Connexion</a></li> </ul> </header>
Le CSS:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 header { display:grid; grid-template-columns: 300px auto; grid-template-rows:70px; align-content: center; border: 1px solid; height: 70px; } header .logo { border: 1px solid blue; } header ul { margin: 0; list-style-type: none; display: flex; align-items: center; column-gap:50px ; border: 1px solid red; } header ul li { background-color: yellowgreen; } header ul li .connexion{ justify-self: flex-end; } header ul li a { color: inherit; text-decoration: none; display: block; width: 100px; height: 70px; border: 2px solid; line-height: 70px; text-align: center; }
Partager