J'ai tiré mes cheveux notre pendant plus d'une heure à ce sujet et je ne peux tout simplement pas comprendre pourquoi cela ne fonctionne pas.
HTML: P>
div#mainmenu { position: absolute; top: 40px; right: 0; font-size: 77%; }
div#mainmenu div.menu ul,
div#mainmenu div.menu ul li,
div#mainmenu div.menu ul li a
{
height: 36px;
}
div#mainmenu div.menu ul {
display: table;
float: left;
width: 700px;
table-layout: fixed;
position: relative;
}
div#mainmenu div.menu ul li
{
display: table-cell;
padding: 0 10px;
overflow: hidden;
}
div#mainmenu div.menu ul li a
{
width: auto;
background: none;
margin: 10px auto;
}
3 Réponses :
Changer div # MAINMENU DIV.MENU UL LI A à ceci: a éléments sont en ligne Par défaut et vous ne pouvez pas définir la hauteur / largeur des éléments en ligne.
Inline-Block serait probablement plus approprié, mais cela est définitivement une option.
Essayez la hauteur de la ligne au lieu de la hauteur:
hauteur de ligne: 36PX
Serait heureux de voir cela dans un exemple simple. Comme 3 lignes.
C'est pourquoi il y a un lien Jsfiddle à un exemple.
Le type d'affichage par défaut pour un lien est en ligne, ce qui ne répond pas à la hauteur ou à la largeur. Au lieu de cela, indiquez que vos liens sont en ligne, ce qui préserve le flux des liens, mais les fait respecter votre demande d'être une taille spécifique (hauteur).
div#mainmenu div.menu ul li a
{
display:inline-block;
height:36px;
}