Come impostare a: altezza / larghezza del collegamento con css?

86

Non riesco a impostare l'altezza e la larghezza degli aelementi della mia navigazione.

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

Qualche idea su cosa sto sbagliando?

html css

— Voto positivo
fonte

197

aggiungi display: blocco;

a-tag è un elemento inline quindi la tua altezza e larghezza vengono ignorate.

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

— Stijn Janssen
fonte

24

Il blocco ha l'effetto collaterale che creerà una nuova linea dopo l'elemento.

— Cobra_Fast

27

Le ancore dovranno essere di un tipo di visualizzazione diverso da quello predefinito per prendere un'altezza. display:inline-block;o display:block;.

Controlla anche line-heightquale potrebbe essere interessante con questo.

— Cobra_Fast
fonte

4

line-height è anche un'ottima soluzione. Ma quando il testo nel collegamento supererà le 2 righe, lo spazio tra queste 2 righe sarà enorme.

— Stijn Janssen

8

Il tuo problema è probabilmente che gli aelementi sono display: inlineper natura. Non è possibile impostare la larghezza e l'altezza degli elementi in linea.

Dovresti impostare display: blocksu a, ma questo porterà altri problemi perché i collegamenti iniziano a comportarsi come elementi di blocco. La cura più comune a questo è dare loro in float: leftmodo che si allineino comunque fianco a fianco.

— Pekka
fonte

1

Farle fluttuare probabilmente impedirà al loro elemento genitore di espandersi attorno a loro.

— Cobra_Fast

@Cobra sì, ma questo è facilmente risolvibile. Nel 2011 c'è bisogno di clearfix?

— Pekka

1

Quindi dobbiamo sistemare la correzione qui? Non suona molto bene.

— Cobra_Fast

5

Dalla definizione di altezza :

Si applica a: tutti gli elementi tranne gli elementi in linea non sostituiti, le colonne della tabella e i gruppi di colonne

Un aelemento è, per impostazione predefinita, un elemento inline (e non è sostituito).

È necessario modificare la visualizzazione (direttamente con la proprietà display o indirettamente, ad esempio con float).

— Quentin
fonte

4

Grazie a RandomUs 1r per questa osservazione:

cambiandolo per visualizzare: inline-block; risolve questo problema. - RandomUs1r 14 maggio 13 alle 21:59

L'ho provato io stesso per una barra dei menu di navigazione superiore, come segue:

Per prima cosa modella l'elemento "li" come segue:

display: blocco in linea;
larghezza: 7em;
text-align: center;

Quindi definisci l'elemento "a"> come segue:

larghezza: 100%;

Ora i collegamenti di navigazione sono tutti della stessa larghezza con il testo centrato in ogni collegamento.

— user123318
fonte