Break up inline-block elements

Question

What I want to do is break up the inline-block <li> s. The code is generated and I have no access to it before it is written to the page. Because the <li> elements have no white space between them, they are not split and won't justify across the page.

I don't mind if the solution is CSS or Javascript based.

I have tried various things in CSS 'content:' and 'after:'.

Please see this fiddle for a demo of the problem: http://jsfiddle.net/2L56N/5/

Edit: The result should like the top example. However, the generated code is like in the bottom example (no space between the tags, causing the inline-block to become one). Drag the width over so only 2 images show to see the justify effect I am looking for.

Answer 1

Unless I'm misunderstanding the question, you can simply add margins to the li elements like so:

ul li {
    display: inline-block;
    margin:5px;
}

http://jsfiddle.net/B7cL9/

Answer 2

You can use display:flex; with justify-content:space-between; to simulate your text-align:justify when white space are missing in between your inline boxes this will only work for younger browsers :

ul {
    display:flex;
    justify-content:space-between;
    text-align: justify;/* your code */
}
ul li {
    display: inline-block;/* your code */
}

DEMO