Problème entre listes et CSS

Salut à tous !

Je débute avec le CSS, et j'ai une question toute simple, mais sur laquelle je me prends la tête depuis des heures...
J'ai un code xhtml tout à fait standard :

  <div id="list-pages">
    <ul>
      <li><a href="">Accueil</a></li>
      <li><a href="">Plan, Horaires</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="">Recrutement</a></li>
      <li><a href="">A propos</a></li>
    </ul>
  </div>

que je souhaiterais traiter avec du CSS afin que la liste ne propose plus de puces,
mais également pour que les différents <code><li></li></code> se retrouvent les uns à la suite des autres, et là,
c'est le drame...

voici le bout de css en question :

#list-pages {
width: 750px;
height:20px;
margin:auto;
}

ul#list-pages {
list-style:none;
list-style-type: none;
display:inline;
}

mais vraiment, rien n'y fait, les éléments de la liste sont toujours les uns en dessous des autres,
il est 5h33 du matin, et je craque...

auriez-vous des idées ?

Mais un display:inline sur tes <li> et pas sur ton <ul>

Si tu veux quand même garder les notions de width et height, il faudra que tu appliques un float:left sur tes <li> et que tu ne mettes pas <li> en display:inline

trigun : ce sont ses li qui sont en inline; il n'y a rien d'incompatibles là-dedans avec le fait que le ul ait des dimensions. Mais bon là y'a apparemment embrouille sur la cible des règles.

cantaeus : il y a une faute dans tes css par ailleurs : il n'existe pas d'ul portant l'id list-pages dans ta page. Ca donnerait un truc comme ça :

#list-pages
{
  width: 750px;
  height:20px;
  margin:auto;
}

#list-pages ul
{
  list-style:none;
}

#list-pages li
{
  display:inline;
}

CE que je voulais dire, je me suis peut-être mal exprimé :

Si on met un display: inline sur les <li>, on ne peut plus leur spécifier de width et de height. Du coup, si on veut pouvoir leur appliquer il faut mettre un display: block et un float:left sur les <li> pour qu'ils soient sur la même ligne.