layout - CSS 内联对齐

Question

尝试布局内联元素时我发现了奇怪的行为。 谁能解释一下为什么会有什么不同？

我对这两个 HTML 都应用了这个 css:

.time {
    position: relative;
    top:100px;
    height: 5px;
    background: red;
    border-radius:5px;
    text-align: justify;
    font-size: 0.1px;
    padding: 0px 10px;
}

.time > .snapshot {
    position: relative;
    display: inline-block;
    width:2px;
    height: 13px;
    top: -5px;
    background: red;
}
.time:after {
    content:'';
    width: 100%;
    display: inline-block;
}

现在是 HTML - 奇怪的行为:

<div class="time" >
    <div class="snapshot" ></div><div  class="snapshot" ></div>
</div>

http://jsfiddle.net/FSLAJ/

• 预期行为:

http://jsfiddle.net/dXwjR/1/

更新

我稍微玩了一下 inline-block 和 justify，还有另一个奇怪的例子:

<div style="text-align: justify;">
    test test test
    <div style="display: inline-block; width: 100%;">test test</div>
    test test test
</div>

JSFiddle example

我只是想知道为什么第二个匿名内联元素不合理？

Answer 1

不同之处在于内联元素对代码中的空格敏感，这就是在您的“预期”示例中提供空格的原因。将一些 margin-right 添加到您的 .snapshot 标记中，它们将像另一个示例一样展开。

jsFiddle example