Horizontally Scrolling an Image Gallery

To cause a list of images to scroll horizontally, you need to make the list inline. To keep it from wrapping, we use the white-space property, setting it to nowrap.

The css will look something like this:

ul {
  margin: 1em 40px;    /*IE requires an explicit width*/
  overflow: auto;
  white-space: nowrap;
  }

li {
  display: inline;
  }

That's how it ought to be. You will need to do some tweaking for IE; for example, you will likely need to set explicit heights ands widths for the ul element.

Look at the actual css used in the demo for the particular values I used. YMMV.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

You may add captions to the thumbnails by using an inline-block gallery and making the ul no wrap, as we did here.

See Making Images from the Command Line for an explanation of how the images were created.

Recommended Reading