[CSS] boite horizontale défilable

Salut,

Places les <LI> en ligne :

li {
    display: inline-block;
}

Et fais en sorte que la liste ait une largeur fixe et soit défillable :

ul {
    width: 400px;
    overflow: scroll;
}

Le Hollandais volant : ta solution ne fonctionne pas. Les LI refusent de s'aligner en dépassant la largeur de UL. Systématiquement, ils retournent à la ligne dès que ça dépasse de la largeur fixé pour UL.

J'ai trouvé cette solution qui fonctionne pas mal : mettre une DIV conteneur qui va avoir une largeur définie et être défilablle.
Ainsi on donne une grosse largeur à UL, donc les LI s'alignent puisqu'ils ne dépassent pas de UL. Et ce dernier dépasse de la DIV qui est scrollable.

<div class="scrollable">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>

li {
  display: block;
  float: left;
}
ul {
  width: 150em; /* autrement dit une grande taille */
  list-style: outside none none; /* reset de la liste */
}
.scrollable{
  overflow: auto;
}

Seule problème : on est obligé de fixer une taille à UL. Or, j'aimerais que la taille de UL soit adaptée au contenu de la liste, c'est à dire que ça soit la taille que font tous les LI alignés.
Si quelqu'un a une solution, je suis preneur !

C'est ça ! Parfait !
J'avais tenté de modifier white-space, mais lors de mes tests, mes li étaient en display:block float:left.

Je résume donc :

ul {
  overflow-x: scroll; /* ou overflow:auto; qui masque la barre si elle est inutile */
  white-space:nowrap;
}
li {
  display: inline-block;
  white-space: normal; /* pour empêcher l'héritage provenant de ul */
}

MERCI !!!