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

84

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?

html css

— Głosuj za
źródło

194

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

— Stijn Janssen
źródło

24

Block ma ten efekt uboczny, że utworzy nową linię po elemencie.

— Cobra_Fast

27

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.

— Cobra_Fast
źródło

4

Wysokość linii to również świetne rozwiązanie. Ale kiedy tekst w linku przekroczy 2 linie, odstępy między tymi 2 liniami są ogromne.

— Stijn Janssen

8

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.

— Pekka
źródło

1

Unoszenie się na nich prawdopodobnie zapobiegnie rozszerzaniu się wokół nich elementu nadrzędnego.

— Cobra_Fast

@Cobra tak, ale można to łatwo naprawić. Czy w 2011 roku jest jakaś potrzeba Clearfix?

— Pekka

1

Więc musimy to naprawić tutaj? To nie brzmi zbyt dobrze.

— Cobra_Fast

5

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).

— Quentin
źródło

4

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.

— user123318
źródło