make a single row of divs with horizontal scroll bars

Ok so I thought I had this fixed using white-space:no-wrap it worked in chrome but nothing else.

I have something like this:

<div class="outer">
    <ul>

        <li>
          <div class="inner">
            <a href="#"><img src="eg1.jpg" /></a>
            <br />
            EG1 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg2.jpg" /></a>
            <br />
            EG2 lorem ipsum
           </div>
        </li>
.
.
.
//etc (multiple li's)

</ul>

</div>

excuse the really poor image but this is the efect im aiming for.

I want a single row of 'items' if they exceed the space then horizontal scroll bars should appear.

hope that makes sense, how can i achieve this?