Question

将ng-repeat元素显示为div时，我遇到了多个inline-block元素的问题。元素之间存在一个奇怪的差距，其中一个ng-repeat结束而下一个开始，如图所示：

gap when using ng-repeat

我创建了一个plunk来演示此行为：

为什么会发生这种情况以及如何消除这种差距？

Answer 1

选中此plunk

有一个黑客可以删除换行时出现的内联元素之间的空格。

<div class="red" ng-controller="TestCtrl">
  <div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><!--
  --><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><!--
  --><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>

您可以阅读有关其他黑客here的更多信息。

Answer 2

这是因为定义了css中.number类的方式。如果你改变它以使它包含float: left，你将摆脱额外的差距。

.number {
  width: 20px;
  height: 20px;
  display: inline-block;
  color: white;
  text-align: center;
  float: left;
}

您可以看到我更新的plunkr here

Answer 3

我知道它很奇怪，但你的内联块div之间的空格（crlf，space ...）会占用空间。

如果删除它们，则空间会消失。（plunker demo）

我无法找到任何解释参考但我的猜测是因为字符在内联块之间，所以它被解释为空格，好像块元素实际上是内联元素（例如跨度）。 / p>

  <body ng-app="testRepeat">
    <div class="red" ng-controller="TestCtrl">
      <div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
    </div>
  </body>

Answer 4

这是由<div>元素之间的空格引起的。有其他方法可以解决这个问题。我的首选布局是：

  <div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div
  ><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div
  ><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>

但其他建议有效。

在不担心HTML的情况下处理此问题的另一种方法是将容器的字体大小设置为0，以便不显示空格。

http://plnkr.co/edit/wXKl61lyiqdONbChYI9o?p=preview

这种方法的缺点是你不能对所包含的元素字体使用百分比大小，你必须明确地设置它们。

Angular中ng-repeat元素之间的差距

4 个答案: