Aligner un menu et les <li>

Version imprimable

23/03/2018, 23h25
pierrot10

1 pièce(s) jointe(s)

Aligner un menu et les <li>
Bonjour,

Je me "casse la tete" (mais grave) depuis plusieurs jours à formater mon menu.

J'ai un menu qui se compose de <nav> <ul> et <li>.
Il se trouve dans un container, qui a une largeur de max-width:470px

J'aimerais que mon menu soit justifié sur le div parent. Mais j'aimerais aussi qui mes li soit aussi justifié et centré.

Chaque li à un

Code:

border-left:1px solid #red

et il faut que l'espace entre le bord rouge, soit égal entre le texte du mnu précédent et celui qui le suit
Pièce jointe 363883

Pour avoir ces expaces, j'ai utilisé des padding left et right.

Le problème qui se pose (et je m'excuse si je n'ai pas été assez explicite), c'est que lorsque je diminue la taille de mon navigateur pour simuler la taille d'un smartphone, les padding ne dimnue pas, donc les li passe l'un dessous l'autre.

Je dois faire en sorte que les li reste toujours aligné horizontalement et lorsque le navigateur diminue, la distance entre le texte et les bords du li (padding) diminuent aussi dynamiquement. Il faudrait s'assurer qu'il y ait au moin un padding de 3px, de manier à ce que les bords ne "touchent" jamais les textes.

Comment faire alors pour que mes li soient
- Justifié (soir aligner sous une image de 470px, par exemple)
- que la largeur et les padding de mes li soient dynamiquement redimenssionné
- que le texte de li soit centré
- que les li restent alignés horizontalement et qu'ils ne passe pas l'un dessous l'autre, au contraire (donc jouer sur une largeur et padding dynamiquement)
J'ai essayé de mettre ceci dans mon ul
Code:

1 2 3 4 5 6 7 ul.menu-ul2 { display: flex; flex-wrap: nowrap;*/ justify-content: space-between; }
sans succès car je n'arrive pas à controler mes li...

Voyez-vous mon problème?

Je vous remercie

Une solution ... A toi de l'adapter avec ton image.

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>>Menu horizontal flex au clic</title>
<style>
* {                                                                                                                                                                                                       
        margin: 0;                                                              
        padding: 0;                                                             
        border: 0;                                                                                                                                                                                 
        box-sizing: border-box;                                 
}                                                                                                                                                                                                          
html, body {                                                                                                                                                                               
        height: 100%;                                                   
        font-size: 100%;                                                
}                                                                                                                                                                                                          
body {                                                                                                                                                                                             
        font-family: "Times New Roman", Times, serif; 
        font-size: 100%;                                                
}                                                                                                                                                                                                          
div             {
        width:auto;
        min-width: 480px;
 
}
nav ul {
        list-style-type: none;
}
nav > ul {
        width: 100%;                                                            
        margin: 0 auto;                                                 
        display: -webkit-flex;                                  
        display: flex;                                                  
        justify-content: center;                                        
}
nav> ul > li {
        -webkit-flex: 1 1 1%;                                   
        flex: 1 1 1%;
        border-right:1px solid black;                                                   
}
nav> ul > li a {
        display: block;
        font: bold 12px/25px Arial, Helvetica;
        padding: 5px 0;                                                         
        text-align: center;                                                     
        background: #031c4b;                                            
        color: #fff;                                                            
        text-decoration: none;                                          
        font-style: italic;
        font-size: 80%;
}
nav> ul > li {
        border-right:1px solid white;                                           
}
nav> ul > li:last-type {
        border-right:none;                                                      
}
}
</style>
</head>
 
<body>
<div>
 
<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Shiatsu</a></li>
    <li><a href="#">Praticienne</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">liens</a></li>
  </ul>
</nav>
</div>
</body>
</html>

Fuseau horaire GMT +2. Il est actuellement 15h11.

Copyright 2000-2023 www.developpez.com - Legal informations

Partenaire : Hébergement Web