Jak ustawić: wysokość / szerokość linku w css?

Po prostu nie mogę ustawić wysokości i szerokości aelementów mojej nawigacji.

#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;
}

Jakieś pomysły, co robię źle?

dodaj wyświetlacz: blok;

a-tag jest elementem wbudowanym, więc wysokość i szerokość są ignorowane.

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

Kotwice muszą mieć inny typ wyświetlania niż ich domyślne, aby przyjmować wysokość. display:inline-block;lub display:block;.

Sprawdź także, line-heightco może być w tym interesujące.

Twoim problemem jest prawdopodobnie to, że aelementy są display: inlinez natury. Nie możesz ustawić szerokości i wysokości elementów wbudowanych.

Musiałbyś ustawić display: blockna a, ale spowoduje to inne problemy, ponieważ linki zaczną zachowywać się jak elementy blokowe. Najczęstszym lekarstwem na to jest podanie ich float: lefttak, aby i tak ustawili się obok siebie.

Z definicji wysokości :

Dotyczy: wszystkich elementów oprócz niezastępowanych elementów wbudowanych, kolumn tabeli i grup kolumn

aElementem jest domyślnie inline elementu (i nie jest zastąpiony).

Musisz zmienić sposób wyświetlania (bezpośrednio za pomocą właściwości display lub pośrednio, np. Za pomocą pływaka).

Podziękowania dla RandomUs 1r za tę obserwację:

zmiana na wyświetlanie: inline-block; rozwiązuje ten problem. - RandomUs1r 14 maja 1313 o 21:59

Wypróbowałem to sam dla górnego paska menu nawigacyjnego, w następujący sposób:

Najpierw stylizuj element „li” w następujący sposób:

wyświetlacz: inline-block;
szerokość: 7em;
wyrównywanie tekstu: do środka;

Następnie stylizuj element „a”> w następujący sposób:

szerokość: 100%;

Teraz wszystkie łącza nawigacyjne mają jednakową szerokość, a tekst jest wyśrodkowany w każdym łączu.