Lista de imágenes desplazable horizontalmente

Estoy tratando de crear una lista de desplazamiento horizontal. Voy a reemplazar esto con una versión elegante cuando JavaScript esté habilitado, pero quiero que el marcado y css se vean y funcionen bien sin Javascript en navegadores razonablemente modernos (cualquier sugerencia que use Javascript de alguna manera está desactivada).

Mi markup / css actual funciona, pero esto es lo que no me gusta de él:

Además, ¿conoces algún tutorial que haya discutido este tipo de cosas? He visto varios tutoriales que demuestran tener toda la página para desplazar, y tomé algunas ideas de ellos, pero no puedo encontrar ninguno que haya demostrado el desplazamiento del elemento ul / ol.

Información adicional que podría ayudar:

  • El ancho de la página es estático (es decir, no es un diseño fluido / elástico).
  • Las imágenes en la página se generan dinámicamente desde PHP, y la cantidad de imágenes puede cambiar.
  • El ancho de las miniaturas está bien definido.

Desbloqueado en vivo ejemplo: http://dl.dropbox.com/u/17261360/horiz.html

Actualización (2018): la solución original basada en la display: inline tiene más de 7 años. En el mundo de hoy, recomendaría el enfoque de flexbox, ya que le da un control total sobre las brechas que aparecen entre las imágenes.


Usando flexbox

Verifique primero la compatibilidad del navegador (probablemente esté bien) y agregue prefijos según sea necesario.

 ul.images { margin: 0; padding: 0; display: flex; flex-direction: row; width: 900px; overflow-x: auto; } ul.images li { flex: 0 0 auto; width: 150px; height: 150px; } 
 
  • ...
  • ...
  • ...