Angular中的ng-repeat元素之间的差距
Posted
技术标签:
【中文标题】Angular中的ng-repeat元素之间的差距【英文标题】：Gap between ng-repeat elements in Angular 【发布时间】：2014-07-27 19:57:49 【问题描述】：当将div 元素显示为inline-block 时，我遇到了多个ng-repeat 元素的问题。元素之间有一个奇怪的间隙，一个ng-repeat 结束，下一个开始，如图所示：
我创建了一个plunk 来演示这种行为：
为什么会发生这种情况以及如何消除差距？
【问题讨论】：
【参考方案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
【讨论】：
以上是关于Angular中的ng-repeat元素之间的差距的主要内容，如果未能解决你的问题，请参考以下文章
angular 中父元素ng-repeat后子元素ng-click失效
ng-model 绑定到 ng-repeat Angularjs 中的元素