HTML / CSS - Immagini affiancate orizzontalmente

Ho bisogno di creare una sorta di slideshow in js di 4 immagini, con una semplice animazione da destra verso sinistra. Il div interessato è largo 920px e ogni immagine ha la stessa larghezza, il problema è che le immagini non si affiancano orizzontalmente come avevo intenzione di fare, ma si posizionano una sotto l'altra.

Come posso risolvere tramite css?

Lascio un po di codice così vi fate una idea

grazie

HTML

<div id="box_03">
           <ul id="slider">
                        <li id="pub_01"><img src="img/pub_01.png"/></li>
                        <li id="pub_02"><img src="img/pub_02.png"/></li>
                        <li id="pub_03"><img src="img/pub_03.png"/></li>
                        <li id="pub_04"><img src="img/pub_04.png"/></li>
            </ul>
</div>

CSS

#box_03 #slider{
	height: 175px;
	width: 920px;
	background-color:#009966;
	margin: 10px auto 0;
	overflow: scroll;
}

#box_03 #slider li{
	position:relative;
	width: 920px;
	height: 175px;
	float:left;
	display:inline;
}

Ho recentemente scritto uno slideshow in jQuery. Ho posizionato le immagini direttamente in un contenitore, applicando a tutte una classe di stile che indica di flottare a sinistra. A differenza del tuo esempio, non ho usato ulteriori contenitori come li e ul. Prova a lasciarle direttamente nel div.

Io recentemente per allineare 4 immagini in un 'DIV' ho messo su tutte le immagini.

 float:left; 

(N.B. non so se è un metodo barbaro ma funziona!)