Разрыв между элементами ng-repeat в Angular

У меня проблема с несколькими элементами ng-repeat при показе элементов div как inline-block. Существует странный зазор между элементами, где заканчивается один 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>

Вы можете узнать больше о других хаках здесь.

Ответ 2

Это связано с тем, как определяется класс .number в вашем css. Если вы измените его так, чтобы он содержал float: left, вы избавитесь от лишнего пробела.

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

Вы можете увидеть мой обновленный plunkr здесь

Ответ 3

Я знаю, что это довольно странно, но пробелы (crlf, spaces...) между вашими встроенными блоками div делают пространство.

Если вы удалите их, пробел исчезнет. (демонстрация plunker)

Я не мог найти никакой ссылки для объяснения, но я предполагаю, что, поскольку символы находятся между встроенными блоками, это интерпретируется как пространство, как если бы блок-элементы были фактически встроенными (например, интервалы).

  <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

Это вызвано пробелом между элементами <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

Недостатком этого подхода является то, что вы не можете использовать процентные размеры для содержащихся в нем элементов шрифтов, и вы должны установить их явно.