Layout CSS内联对齐

尝试布局内联元素时，我发现了wierd行为。 有人能解释一下为什么有什么不同吗

我将此css应用于两个HTML：

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

预期行为：

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

更新

我使用了一些内联块和对齐，我有另一个wierd示例：

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

---

我只是想知道为什么第二个匿名内联元素不能被证明是正确的？

区别在于内联元素对代码中的空格很敏感，而这正是您期望的示例中提供空格的原因。在快照右侧添加一些边距。在另一个快照中添加记号，它们将像另一个示例一样展开

---

是的，你是对的，这就是为什么会有“证明”的效果。我只是想知道为什么justify不能将带有内联块的div视为分隔的，并且能够对元素进行对齐。看起来就像是在空白处工作。