Search code examples
csshtml-liststext-aligntext-justify

Space objects equidistantly with CSS

I'm trying to space a UL equidistantly: http://cssdesk.com/jMSsr

The first row spaces out perfectly, but the second row doesn't space out as there are only 2 items.

I'm using text-align:justify to space out the list evenly but this causes issues on second row as justify reverts to aligning left when the line is short.

Any ideas on how to fix the second row?

Cheers, JV

Solution

  • The solution is actually rather simple: put the elements you want aligned in a fixed-width div, then set their left and right margins to auto.