Resolved Horizontal row of scrolling images

I'm working on placing a row of panoramic images inside my iPad hybrid app. Basically, all I need is for the user to be able to scroll sideways through a row of four or five images while keeping the rest of the site stationary. Apparently, this is possible just by placing images inside a div and setting overflow to "auto."
I can't seem to get it to work, my images always show up one beneath the other instead of in a row. Here is my code so far:

CSS
div.scroll {
height: 1024px;
width: 768px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

HTML
<div class="scroll">
<img src="images/image-1.jpg"/>
<img src="images/image-2.jpg"/>
<img src="images/image-3.jpg"/>
</div>

I saw somewhere that it might have to do with the display property, inline vs. block, but I can't figure that part out either. Any help would be appreciated.

I think I figured out a solution by adding to my css. I'm not really sure why it worked, but it did.

I tried that. It should have worked but it didn't. It was the method usually suggested when I tried Googling before posting here but it resulted in only one image showing up.

Ah, I tried using an explicit width, but I may not have used it with display:inline at the same time. I was trying everything. I also had a weird problem where all my images had gaps between them, which I finally figured out was a bug where if you had your html code on separate lines it created gaps, even though that should never happen. Sigh, so many problems just to create scrolling images in the iPad's viewport.