Horizontally scrolling list of images

Question

I\'m trying to create a horizontally scrolling list. I\'m going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work f

Answer 1

Update (2018): The original solution based on display: inline is over 7 years old now. In today's world, I would recommend the flexbox approach, because it gives you full control over the gaps that appear between the images.

---

Using flexbox

Check browser compatibility first (you're probably fine), and add prefixes as needed.

ul.images {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>

---

Using display: inline

This works for me, tested in Firefox 4 beta 10, would be advisable to test it in IE as well:

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  display: inline;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>

The trick in the CSS is to set the lis to display: inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done. You cannot specify a size on inline elements, but they will be stretched to fit the img elements inside them. The scrolling is then simply overflow-x: auto on the parent ul element.

Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.

---

Using display: inline-block

Similar to the previous approach, but allowing us to set a size on each individual image block:

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  display: inline-block;
  width: 150px;
  height: 150px;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>