Css 伪元素水平对准

我正在尝试创建一个sass mixin，使所有子div水平对齐。我希望html看起来像这样：

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

您可以在上看到工作（使用span）和非工作（使用伪元素）

为什么这两种方法的作用不一样

更新：它们在Firefox中看起来相同，但在Chrome 28和Safari 6中都不同。

我遇到了一个我认为是基于代码的，在运行一些测试后，我发现将

字体大小：0

设置到包装器，并在子项中覆盖它才是区别所在

这是最新的小提琴

---

问题是由空格引起的。您所要做的就是删除最后一项后的空格

项目1
项目2
项目3
项目4

请注意，除了

：before

和

：：after

伪元素之外，您不能在其他元素上使用

content

属性-我也没有注意到这两个示例之间的任何差异。我更新了JSFIDLE以删除content属性，因为它没有被使用。我确实注意到它们只是在Chrome/Safari中看起来有所不同。它们在Firefox中看起来完全相同。将字体大小设置为0是处理不需要的空白的最糟糕方法，因为它不能与相对字体大小一起使用。

@mixin spread-wrapper() {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  position: relative;

  &:after {
    content: "";
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
  }

  > * {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
  }
}

<div class="wrapperA">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div><!--
--></div>