Angular中的ng-repeat元素之间的间隙 [英] Gap between ng-repeat elements in Angular

问题描述

在将 div 元素显示为 ng-repeat > inline-block 。在一个 ng-repeat 结束和下一个开始的元素之间有一个奇怪的差距，如图所示：

I am having a problem with multiple ng-repeat elements when showing div elements as inline-block. There is a strange gap between elements where one ng-repeat ends and the next one starts, as illustrated by the image:

我已创建 plunk 来演示此行为：

I have created a plunk to demonstrate this behavior:

为什么会发生这种情况，如何清除差距？

Why is this happening and how to remove the gap?

推荐答案

检查此 plunk

在换行时出现的内联元素之间有空格。

There is a hack to remove space between inline elements that appears at line-break.

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

您可以阅读更多有关其他黑客的资讯这里。

You could read more about other hacks here.

这篇关于Angular中的ng-repeat元素之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！