Bonjour.

J'ai un problème de centrage de mon menu lorsque j'utilise des liste avec un padding.

le menu est décalé a droite de la somme de padding... comment bien centrer le menu ?

<nav id="cathegorie"><ul><a><li>Mathematics</li></a><a><li>Life Science</li></a><a><li>Computer Science</li></a><a><li>Physic</li></a><a><li>Chemistry</li></a><a><li>More</li></a></ul></nav>

nav ul{
	display: flex;
	justify-content: center;
}
nav#cathegorie ul li{
	list-style-type: none;
	font-family: URW Gothic L;
	font-weight: bold;
	padding: 20px;
}
nav#cathegorie ul li:hover{
	background-color: ghostwhite;
}

-
Edité par -Crixus- 18 novembre 2019 à 17:18:35

Bonjour, ton HTML n'est pas valide,passe le au validateur https://validator.w3.org/#validate_by_input

Seul la balise <li> peut être enfant direct de <ul> et <ol>, donc les <a> ne peuvent pas être à cet endroit mais à l'intérieur des <li>.

Il existe des marges par défaut sur la balise <ul>. Examine cet élément avec l'inspecteur des éléments (F12)

 L7 de ta CSS, un nom de police composer de plusieurs mots doit être entre quotte.   (et ce termine normalement par un nom de police générique. )

Bonjour MarcKa ,

Je pense qu'il faut transférer le padding de la balise LI sur la balise A

Un truc comme cela :

nav#cathegorie  a{ 
    padding: 20px;
}

effectivement il faut Passer le padding: 20px;  du <li> vers le <a>.

Mais aussi  le lien en display: block;

Il y a un padding par default sur le ul. j'ai l'ai vu grâce a l'inspecteur d’élément. merci.

En effet avec le padding sur le <a> plutôt que sur le li ça marche.

Merci beaucoup.