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

【问题标题】：Gap between ng-repeat elements in AngularAngular中的ng-repeat元素之间的差距
【发布时间】：2014-07-27 19:57:49
【问题描述】：

当将div 元素显示为inline-block 时，我遇到了多个ng-repeat 元素的问题。元素之间有一个奇怪的间隙，一个ng-repeat 结束，下一个开始，如图所示：

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

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

【问题讨论】：

标签： javascript html css angularjs

【解决方案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。

【讨论】：

哦，非常感谢...我想我会因为几个像素的差距而不得不把整个部分都扔掉。

【解决方案2】：

这是由<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

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

【讨论】：

【解决方案3】：

我知道这很奇怪，但是你的内联块 div 之间的空格（crlf、空格...）构成了空间。

如果您删除它们，空间就会消失。 (plunker demo)

我找不到任何解释参考，但我的猜测是，由于字符位于内联块之间，因此它被解释为一个空格，就好像块元素实际上是内联的一样（例如跨度）。

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

【讨论】：

【解决方案4】：

这是因为你的 css 中 .number 类的定义方式。如果您将其更改为包含float: left，您将消除多余的空白。

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

你可以看到我更新的plunkr here

【讨论】：