Question

我正在尝试创建一个sass mixin，以横向证明所有子div。我更喜欢html看起来像这样：

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

如果我在所有div之后放置一个<span>元素，那么它工作正常，但是当我尝试用'after'伪元素替换它时，那么最后一个元素会偏离几个像素

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

你可以在http://jsfiddle.net/jeffaudio/Sun4b/

看到工作（有跨度）和不工作（有伪元素）

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

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

Answer 1

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

http://jsfiddle.net/Sun4b/8/

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

Answer 2

我遇到了this tutorial，我认为这是你基于代码的那个，在运行一些测试之后，我发现将font-size:0设置为包装并在子代中覆盖它是有什么区别的

这是更新的小提琴 http://jsfiddle.net/Sun4b/7/

与伪元素的水平对齐

2 个答案: