Discussion :

[laurentSc]

Bonjour,
ma liste est en fait un menu et je souhaite le présenter sur une seule ligne. Pour obtenir cela, je me suis inspiré d'un codepen : https://codepen.io/ann71727/pen/OJVQQeR
Du coup, voici mon menu et le CSS associé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<footer>
    <div class="div-flex">
    <ul id="un" class="container">
        <li><a href="?action=vos-temoignages">Vos témoignages</a></li>
        <li><a href="?action=politique-de-confidentialite">Politique de confidentialité</a></li>
        <li><a href="?action=nous-contacter">Nous contacter</a></li>
        <li><a href="?action=etre-rappele">Être rappelé</a></li>
        <li><a href="?action=mentions-legales">Mentions légales</a></li>
    </ul>
    </div>
</footer>

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
 
/* aligner l'UL */
#ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#ul li {
    display: inline-block;
    min-width: 5em;
    margin: 0 0.5em;
}
#ul a {
    text-decoration: none;
    display: block;
    font-family:Arial;
    position: relative;
    color: black;
    padding:.5em 0
}

Malheureusement, la liste reste verticale et au vu de l'inspecteur, je crains que les règles CSS ne soient pas appliquées. (Comme je suis en local, impossible de vous donner un lien)
Pouvez vous me dire comment faire ?

[laurentSc]

Je viens de voir qu'il y avait une erreur dans mon CSS : ul à la place de un.
Mais même après correction, le problème reste.
Pour être sûr que ça vienne pas d'un effet de bord causé par le reste du CSS, j'ai créé un codepen avec ce menu et le CSS intégral : https://codepen.io/laurentsch/pen/ExeKGWB
Je vous évite les 500 lignes de CSS mais c'est aligné.
Autrement dit, la raison est autre, mais laquelle ? Moi, je suis à court d'idée...

[gesualda]

Hello laurentSc

Et si tu enlevais le # devant la balise ul ?

Code :

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
/* aligner l'UL */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul li {
    display: inline-block;
    min-width: 5em;
    margin: 0 0.5em;
}
ul a {
    text-decoration: none;
    display: block;
    font-family:Arial;
    position: relative;
    color: black;
    padding:.5em 0
}

[NoSmoking]

Bonjour,

Mais même après correction, le problème reste.

quel soucis, tes éléments sont sur la même ligne.

Regarde peut-être cette discussion qui devrait t'intérresser : Menu horizontal occupant toute la largeur de l'écran, j'ai fait un petit recap. post #7.

[laurentSc]

Merci pour ta réponse NoSmoking, pas encore eu le temps de m'attaquer à ça, mais j'y compte bien.

[laurentSc]

idée abandonnée finalement...

[NoSmoking]

Pourquoi ?
D'après ce que je vois il aurait suffit de supprimer le display:flex du <footer> et de transférer cela sur ton élément <div class="div-flex">, qui soit dit en passant n'est pas des plus utile !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.div-flex {
  display: flex;
  justify-content: center;
}

Et sans l'élément superflus :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<footer>
  <ul id="unun" class="container container-flex">
    <li><a href="?action=vos-temoignages">Vos témoignages</a></li>
    <li><a href="?action=politique-de-confidentialite">Politique de confidentialité</a></li>
    <li><a href="?action=nous-contacter">Nous contacter</a></li>
    <li><a href="?action=etre-rappele">Être rappelé</a></li>
    <li><a href="?action=mentions-legales">Mentions légales</a></li>
  </ul>
</footer>

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.container-flex {
  display: flex;
  justify-content: center;
}

Quelque chose comme cela !

[laurentSc]

Pourquoi ?

D'un point de vue ergonomique, je n'en vois plus l'intérêt...