Menu qui part en vrille
erwan
-
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Bonsoir à tous , voici un menu dans un div , mais le menu n'est ni centré verticalement et horizontalement et le texte déborde des cases du menu , quelqu'un saurait me dire où est le soucis svp ?
merci
<div class="s"> <ul> <li><a href="">x</a></li> <li><a href="">y</a></li> <li><a href="">z</a></li> <li><a href="">u</a></li> </ul> </div>
.s {
height: 20px;
}
ul {list-style-type: none;}
div.s a {
margin: 0 2px;
width: 100px;
height: 15px;
float: left;
text-align: center;
border: 1px solid gray;
}
merci
A voir également:
- Menu qui part en vrille
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Windows 11 menu démarrer classique - Guide
- Windows 11 menu contextuel classique - Guide
1 réponse
salut,
• le menu n'est ni centré verticalement et horizontalement
verticalement, si tu parles du <ul> dans le <div> c'est délicat, il faudrait connaitre la page entière.
si tu veux centrer le texte dans le <li> le plus simple est d'utiliser l'espacement haut et bas {padding: 15px 0;}.
horizontalement c'est normal. tu appliques {text-align: center;} à <a> qui est un élément en ligne. ce qui veut dire que la taille de la boite du lien correspond à la taille du texte. le texte est centré mais dans une boite qui fait sa taille : invisible.
essaie d'ajouter {display: block;}.
• le texte déborde des cases du menu
commence par enlever marges et espacements à <ul> et <li> avec {margin: 0; padding: 0;} et appliques une largeur suffisante au <a>, qui doit être {display: block;} pour tenir compte de {width} et {height}.
• le menu n'est ni centré verticalement et horizontalement
verticalement, si tu parles du <ul> dans le <div> c'est délicat, il faudrait connaitre la page entière.
si tu veux centrer le texte dans le <li> le plus simple est d'utiliser l'espacement haut et bas {padding: 15px 0;}.
horizontalement c'est normal. tu appliques {text-align: center;} à <a> qui est un élément en ligne. ce qui veut dire que la taille de la boite du lien correspond à la taille du texte. le texte est centré mais dans une boite qui fait sa taille : invisible.
essaie d'ajouter {display: block;}.
• le texte déborde des cases du menu
commence par enlever marges et espacements à <ul> et <li> avec {margin: 0; padding: 0;} et appliques une largeur suffisante au <a>, qui doit être {display: block;} pour tenir compte de {width} et {height}.
