distributing div horizontally does not work when divs are suck

Distributing divs horizontally evenly doesn't work (at least in chrome and firefox) when div elements are stuck to each othe (i.e. no spaces betwwen the divs) : see fiddle : http://ift.tt/1yvm4XI

HTML :

<div class="ul">
<div class="li">Item 1</div>
<div class="li">Item 2</div><div class="li">Item 3</div>
<div class="li">Item 4</div>
</div>

CSS :

.ul {
    text-align: justify;
}
.ul > .li {
    display: inline-block;
}
.ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}
.li {
    background-color: hotPink;
    color: #fff;
}

The result is the following :

=======================================
Item 1       Item 2 Item 3       Item 4
=======================================

This works fine exepts betten Item 2 and Item 3 that are stuck together. What I want is :

=======================================
Item 1     Item 2     Item 3     Item 4
=======================================

Problem is that since my HTML is compressed spaces between divs are automatically removed and I can't distribute evnely my divs.

<div class="ul"><div class="li">Item 1</div><div class="li">Item 2</div><div class="li">Item 3</div><div class="li">Item 4</div></div>

becomes :

=======================================
Item 1 Item 2 Item 3 Item 4
=======================================

Any idea ?