Wie setze ich eine: Link Höhe / Breite mit CSS?

83

Ich kann die Höhe und Breite der aElemente meiner Navigation einfach nicht einstellen .

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

Irgendwelche Ideen, was ich falsch mache?

html css Upvote
quelle

Antworten:

195

Anzeige hinzufügen: Block;

a-tag ist ein Inline-Element, daher werden Höhe und Breite ignoriert.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}
Stijn Janssen
quelle
23
Block hat den Nebeneffekt, dass nach dem Element eine neue Linie erstellt wird.
Cobra_Fast
26

Anker müssen einen anderen Anzeigetyp als den Standard haben, um eine Höhe zu erhalten. display:inline-block;oderdisplay:block; .

Überprüfen Sie auch, line-heightwelche davon interessant sein könnten.

Cobra_Fast
quelle
4
Linienhöhe ist auch eine gute Lösung. Wenn der Text im Link jedoch mehr als zwei Zeilen umfasst, ist das Leerzeichen zwischen diesen beiden Zeilen sehr groß.
Stijn Janssen
8

Ihr Problem ist wahrscheinlich, dass aElemente sinddisplay: inline von Natur aus sind. Sie können die Breite und Höhe von Inline-Elementen nicht festlegen.

Sie würden zu Satz haben display: blockauf die a, aber das wird andere Probleme mit sich bringen , da die Links zu verhalten wie Blockelemente beginnen. Die häufigste Heilung dafür ist, sie float: leftso zu geben, dass sie sich sowieso nebeneinander aufstellen.

Pekka
quelle
1
Durch das Schweben wird wahrscheinlich verhindert, dass sich das übergeordnete Element um sie herum ausdehnt.
Cobra_Fast
@ Cobra yup, aber das ist leicht zu beheben. Gibt es 2011 einen Bedarf an Clearfix?
Pekka
1
Also müssen wir das Update hier beheben? Das klingt nicht sehr gut.
Cobra_Fast
5

Aus der Definition der Höhe :

Gilt für: alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenspalten und Spaltengruppen

Ein aElement ist standardmäßig ein Inline-Element (und wird nicht ersetzt).

Sie müssen die Anzeige ändern (direkt mit der Anzeigeeigenschaft oder indirekt, z. B. mit float).

QUentin
quelle
4

Vielen Dank an RandomUs 1r für diese Beobachtung:

Ändern, um anzuzeigen: Inline-Block; löst dieses Problem. - RandomUs1r 14. Mai 13 um 21:59 Uhr

Ich habe es selbst für eine Top-Navigationsmenüleiste wie folgt versucht:

Gestalten Sie zuerst das "li" -Element wie folgt:

Anzeige: Inline-Block;
Breite: 7em;
Textausrichtung: Mitte;

Gestalten Sie dann das Element "a"> wie folgt:

Breite: 100%;

Jetzt sind die Navigationslinks alle gleich breit, wobei der Text in jedem Link zentriert ist.

user123318
quelle