Horizontal List Element Evenly Spaced And Responsive

I am creating an unordered list that contains images and text, and would like each item to be 1/3rd the width with a margin, evenly spaced. I can't figure out how to ensure, in a r

Solution 1:

There's a couple of ways to tackle this, but the easiest CSS solution is to use inline-blocks for the li elements. Now the issue with inline-block is, they will take whitespace into account, breaking your layout, but there are two easy solutions for this in the markup:

1. HTML comments between the li elements;
2. Compressed HTML code.

Example with HTML comments:

<ul><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li></ul>

Example with compressed HTML:

<ul><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li></ul>

For the CSS, this should do the trick (you can modify the width of the 'columns' in media queries).

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

  li {
    display: inline-block;
    width: 50%;
  }

@media screen and (min-width: 20em) {

  li {
    width: 33.33333%;
  }

}

Another thing to note is that you can't use margins on the left and right of these items, as they will not be part of the original width, but you can use padding on the inside to "space" elements apart. This is also how some of the repsonsive grid systems are built (a little more advanced, but same principle).

Here's the live code: http://codepen.io/TheDutchCoder/pen/zxxwom

Solution 2:

Here is a cross-browser solution. I have added an html5 structure if you need to include images in your list.

/* the two following properties modify the box-model so that padding is removed from the width instead of being added */html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul:after { /* to clearfix your ul list */content: "";
  display: table;
  clear: both;
}
ulli {
  display: block; /* inline-block have an extra 4px margin wich makes it harder to use in this situation */width: 33.3333333%; /* You get it (100/3) but use exact number */padding: 10px5px;
  float: left; /* if you use block elements you have to float them */text-align: center;
}
figure {
  margin: 0; /* to normalize figure element */
}
figureimg {
  max-width: 100%;
  max-height: 100%;
}

<ul><li><figure><imgsrc="http://placehold.it/500x500" /><figcaption>Text</figcaption></figure></li><li><figure><imgsrc="http://placehold.it/500x500" /><figcaption>Text</figcaption></figure></li><li><figure><imgsrc="http://placehold.it/500x500" /><figcaption>Text</figcaption></figure></li><li><figure><imgsrc="http://placehold.it/500x500" /><figcaption>Text</figcaption></figure></li><li><figure><imgsrc="http://placehold.it/500x500" /><figcaption>Text</figcaption></figure></li><li><figure><imgsrc="http://placehold.it/500x500" /><figcaption>Text</figcaption></figure></li></ul>

Solution 3:

Try this: http://jsfiddle.net/j13889cx/

I've added a div element wrapping everything inside each li element called .ul-wrap.

This allows you to add any margin/padding you'd like because .ul-wrap is a block element.

Try changing .ul-wrap's margin or padding.