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/

更新

我使用内联块玩一点并证明其合理性，我有另一个奇怪的例子：

<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

CSS内联对齐

1 个答案: