当div被卡住时，水平分配div不起作用

Question

当这些元素相互粘连（即它们之间没有空格）时，水平均匀分布div不起作用（至少在chrome和firefox中）

示例：http://jsfiddle.net/pdelorme/au9ouko0/

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;
}

结果如下：

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

当Item 2和Item 3粘在一起时，这种情况很好。

我想要的是：

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

问题是，由于我的HTML被压缩，div之间的空格会被自动删除，因此我无法均匀地分发它们。

<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>

成为：

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

有什么想法吗？

Answer 1

尝试将flexbox模块与space-between对齐的元素一起使用。这种方法不依赖display: inline-block因此，如果在服务器端生成的页面已被压缩，则无关紧要。

示例小提琴：http://jsfiddle.net/au9ouko0/4/

ul {
    display: flex;
    justify-content: space-between;
}

---

输出（为清晰起见插入边框）

跨浏览器的Flexbox支持：http://caniuse.com/#feat=flexbox