Funzionamento display:inline-block

[vortex87]

Ho il classico menù <ul>[*].....[/list]e devo fare in modo che sia orizzontale preferibilmente evitando di usare il float:left - mettendo un semplice display:inline però non riesco a dare bene il padding agli <a> e soprattutto non riesco ad abbassare di 3px l'elemento attivo.
Come posso fare?

Pensavo che l'inline-block fosse la soluzione, ma non capisco bene a cosa devo assegnarlo (se al[*] o all'<a>) e quale display: deve avere l'altro elemento.

Grazie

[Mich_]

Se attribuisci il display: inline; al[*], poi non puoi piu` assegnare width, height e altre caratteristiche dei blocchi.
La soluzione consigliata di solito e` assegnare il float a tutti i[*].

Gli <a> son elementi inline, per cui potrebbero non supportare il padding. Puoi renderli
display: block;
dopo di che` puoi assegnare width: 100% e height: 100%, e sistemare piu` facilemente i padding.
Pero` non puoi inserire un elemento di tipo blocco dentro uno inline.

Concludendo:
<ul id="menum">[*]link[*][*]link[*]
...[/list]

con il CSS:

#menum {
  width: ...;
  ...
}
#menum li {
  float: left;
}
#menum a {
  display: block;
  width: 100%; height: 100%;
  color: ...;
  background: ...
  text-decoration: ...;
  ...
}
#menum a:hover {
  text-decoration: ...;
  color: ...;
  ...
}

[erredeco]

Pensavo che l'inline-block fosse la soluzione, ma non capisco bene a cosa devo assegnarlo (se al[*] o all'<a> ) e quale display: deve avere l'altro elemento.

mmmhh... da quel che so il supporto dei browser attuali per l'inline-block è molto scarso...
io non mi fiderei.