Ho un problema di posizionamento del menu a causa di <ul>
Infatti il menù è formato da una lista dove ogni elemento[*] ha una sua larghezza variabile in base al contenuto, vorrei però che tutto il menù si posizionasse al centro del div superiore. Il mio problema è che <ul> ha deciso che dopo l'ultima lista deve occupare tutto lo spazio che trova...e così utilizzando un div senza larghezza con margin:0 auto rimane sempre decentrato perché la larghezza diventa quella di ul che diventa tutta quella disponibile...
codice:
<div id="menu">
     <ul> [*]<a href=#>Pagina 1</a> [*]<a href=#>Pagina 2</a>[/list]
</div>
Codice CSS:
codice:
#menu{position:relative; 
    clear:both;
    margin:0 auto;
    padding:0;
    height:30px;}
#menu ul{position:relative; 
    clear:both;
    font-variant:small-caps;}
#menu li{position:relative;
    left:auto;
    height:30px;
    float:left;
    list-style:none;
    border-right:1px solid #F90;
    border-left:1px solid #F90;
    margin:0;
    padding:0;}
#menu li a{width:auto;
    display:block;
    text-decoration:none;
    text-align:center;
    line-height:30px;
    color:#F90;
    padding:0 7px 0 7px;}
Come posso risolvere il problema?