How to force images to be aligned in the same line?

Question

It's easy to explain with images, here is what I want: like Google Play, the image could be viewed in a scrolling box! But what I get when I put it into tag is like this:

My code:

<div style="overflow: scroll; display: inline-block;">
<a class="lightview" title="image1" href="http://1.png" rel="lightbox">
<a class="lightview" title="image2" href="http://2.png" rel="lightbox">
<a class="lightview" title="image3" href="http://3.png" rel="lightbox">
</div>

Answer 1

Specify that the text will never wrap:

white-space: nowrap;

Fiddle

Answer 2

you need to restrict the height of your containing div to be the height of the images.