À l'aide de fond avec de la position relative?

Je suis en train d'essayer d'obtenir une série de <a> balises apparaissent à la base de leur parent <li>.

Le problème est de deux ordres. Si j'utilise position: relative, bottom: 0; n'a aucun effet. Si j'utilise position: absolute, le <li>'s avoir de chevauchement des largeurs.

Je peux résoudre le premier problème à l'aide de la top style, mais ce n'est pas idéal, car la taille du texte est inconnu, et l'élément de mesure à partir du haut de ces deux éléments (donc la base de l'élément ne seraient pas touchés par la base, à moins que je savais que la taille de la police).

Je peux corriger le deuxième définir les largeurs, mais cela va ajouter indésirables espace blanc sur les éléments les plus courts titres.

Voici un JSFiddle de la question.

Vous ne voulez pas ajouter un margin/padding-top de votre li/un des éléments?
Même problème avec les différentes tailles de police.

OriginalL'auteur Mild Fuzz | 2011-07-21

  1. 4

    Essayer ce peu de CSS:

    #main-menu li a{
    display: table-cell; 
    position: relative;
    vertical-align: bottom;
    height: 111px;
}

    jsFiddle du style de travail

    En ce qui concerne ma recherche pouvez le voir, le seul navigateur problème de compatibilité avec ce que doit être appliqué, et d'élément inline pour IE7, qui dans ce cas est très bien. Quelqu'un sait de toute raison, ce serait un échec?

    OriginalL'auteur Joe

  2. 0

    Ajouter un line-height de la valeur à votre "#main-menu li a" le style et la position en conséquence, 200px devrait fonctionner.

    C'est imparfaite, car elle dépend aussi de la taille de police.
    Vous avez tout à fait raison, il m'a frappé après un certain temps.

    OriginalL'auteur Andres Ilich