Comment définir un:lien en hauteur et en largeur avec le css?

Question

il semble un peu fou, mais j'ai juste ne peut pas régler la hauteur et la largeur de l' a éléments de ma navigation.

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

Les idées de ce que je fais de mal?

Answer 1

ajouter display: block;

une balise est un élément intégré de sorte que votre hauteur et la largeur sont ignorés.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

Answer 2

Les ancres doivent être un autre type d'affichage que leur défaut de prendre de la hauteur. display:inline-block; ou display:block;.

Vérifiez également sur line-height qui pourrait être intéressant avec cette.

Answer 3

Votre problème est probablement que a éléments display: inline par la nature. Vous ne pouvez pas définir la largeur et la hauteur des éléments en ligne.

Vous devez définir display: block sur le a, mais qui apporte d'autres problèmes, car les liens commencent à se comporter comme des éléments de bloc. Le plus commun de remède à cela est de leur donner des float: left de sorte qu'ils s'alignent côte à côte, de toute façon.

Answer 4

À partir de la définition de la hauteur:

S'applique à: tous les éléments, mais non remplacer les éléments en ligne, des colonnes de table, et des groupes de colonnes

Un a élément est, par défaut, un élément inline (et c'est non remplacé).

Vous avez besoin de changer l'affichage (directement avec l'affichage de la propriété ou indirectement, par exemple avec flotteur).

Answer 5

Grâce à RandomUs 1r pour cette observation:

changement de display:inline-block; résout ce problème. – RandomUs1r 14 Mai 13 à 21:59

Je l'ai essayé moi-même pour un menu de navigation en haut de la barre, comme suit:

D'abord le style de la "li" élément comme suit:

display: inline-block;
largeur: 7em;
text-align: center;

Ensuite, le style de la "une"> élément comme suit:

width: 100%;

Maintenant, les liens de navigation sont tous égaux largeur avec texte centré sur chaque lien.