title: css - Displaying images with horizontal scroll bar
body: <p>I'm trying to display a number of images horizontally inside of a fixed-width div.  I would like to use a horizontal scroll bar to display the images which do not fit inside the div.</p>
  
  <p>However, the images are displaying vertically, rather than horizontally.  Is there a way to force them to display side-by-side?</p>
  
  <pre><code>div#event {
  width: 150px;
  overflow-x: scroll;
  overflow-y: hidden;
  }
  
  div#event ul { list-style: none; }
  
  div#event img {
  width: 100px;
  float: left;
  }
  
  &lt;div id="lasteventimg"&gt;
  &lt;ul&gt;&lt;li&gt;&lt;img src="./gfx/gallery/image1.jpg" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="./gfx/gallery/image2.jpg" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="./gfx/gallery/image3.jpg" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>