Allineamento centrale vari tag LI

[miki.]

allora, ho un elenco non ordinato, dove al suo interno ci sono 4 tag li contenenti una parola, e il contenuto dei tag li può variare, ma vorrei che queste 4 parole fossero sulla stessa riga e centrate rispetto ad un box che le contiene che è largo 700px. Come potrei fare?

questo è il codice

<div id="container">
<ul id="menu">
[*]Who
[*]What
[*]When
[*]Why
[*]Contacts
[*]About Us
[/list]
</div>


in xhtml transitional

[seed_squall_it]

#container {
width: 100%;
min-height: 40px; /* Hack per la min-height in IE */
height: auto !important; /* Hack per la min-height in IE */
height: 40px; /* Hack per la min-height in IE */
}

#menu {
text-align: center;
padding: 0;
margin: 0 auto;
}

#menu li {
list-style: none;
display: inline;
padding: 0;
margin: 0;
}

#menu li a {
padding: 0;
margin: 0 12px;
height: 0; /* Hack per impostare i margini orizzontali degli elementi in linea in IE */
line-height: 40px;
}

Ovviamente puoi impostare la regola di stile dell'elemento #container come preferisci. Una rapida spiegazione su due cose. L'ultima regola di stile (quella per gli elementi <a> interni agli elementi[*]) ha impostata la proprietà line-height. Questa ti è utile per determinare l'"altezza" di #container. L'ho impostata a 40px, ma puoi stabilire tu quanto deve essere alta. Grazie a line-height i tuoi link sono sempre centrati vericalmente rispetto al <div> che li contiene. Purtroppo, se diminuisci il carattere, anche il <div> che contiene la lista dei link si abbasserà troppo. Per questo motivo, nella regola per l'elemento #container ho usato l'hack che permette di gestire la min-height (Firefox la supporta anche senza hack, IE no).
Il valore della min-height (e della height) deve essere uguale a quello della line-height impostata per gli elementi <a>. Infine, nell'ultima regola, vedrai la dichiarazione height: 0. Questo serve a IE perché altrimenti non riesce ad impostare i margini orizzontali degli elementi <a> (che sono elementi in linea, ma si sa...IE fa di testa sua!). Gli altri browser ignorano semplicemente questa dichiarazione perché non è possibile impostare l'altezza per gli elementi in linea. In pratica, IE vuole un'altezza (anche nulla) per poter impostare i margini orizzontali degli elementi in linea!

Devi solo modificare il codice XHTML della tua pagina NON andando a capo tra un tag[*] e l'altro. Questo perché tutti i browser interpretano l'"a capo" come uno spazio, che viene aggiunto tra i vari tag (e che va a sommarsi al valore dei margini orizzontali degli elementi <a> contenuti in essi).

[miki.]

grazie mille.

non avevo pensato alla possibilità di mettere il li in inline