0

我正在尝试创建一个 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>在所有 div 之后放置一个元素，那么它可以正常工作，但是当我尝试用“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 中不同。

4

2 回答 2

0

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

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>
于 2013-08-19T13:52:27.137 回答
-1

我遇到了本教程，我认为它是您基于代码的教程，在运行了一些测试之后，我发现设置font-size:0包装器并在子级中覆盖它是不同之处。

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

于 2013-08-17T20:14:42.687 回答