ngRepeat中简单指令和相同指令之间的不同空间答案

【问题标题】：Different space between simple directive and same directives in ngRepeatngRepeat中简单指令和相同指令之间的不同空间
【发布时间】：2016-08-10 19:07:21
【问题描述】：

问题是： ngRepeat 中的简单指令和相同指令之间有很大的空间（在display: inline-block 和chrome浏览器的情况下）

Here the plunker

我可以添加无限指令，一切都会好的：

<tile></tile>
<tile></tile>
<tile></tile>
<tile></tile>

但是如果我写像ngRepeat这样的东西，布局就会被破坏：

<tile></tile>
<tile></tile>
<tile></tile>
<!-- Here will be too big space-->
<tile ng-repeat="t in [0, 1, 2, 3]"></tile>

指令代码如下：

 .directive('tile', function () {
        return {
            restrict: 'E',
            scope: {},
            replace: true,
            template: '<div class="tile"></div>',
            controller: function ($scope) {},
            link: function (scope) {}
        };
    })

指令css类.tile：

.tile {
  background-color: red;
  height: 70px;
  width: 70px;
  margin: 4px 2px;
  display: inline-block;
}

那么，为什么会这样呢？这是什么原因，我该如何应对？

【问题讨论】：

删除标签之间的空格。 Display inline-block 考虑元素之间的空格。 See here

标签： javascript css angularjs angularjs-directive ng-repeat

【解决方案1】：

删除标签之间的空格。显示内联块考虑元素之间的空白。

【讨论】：

【解决方案2】：

可以加float: left；到你的 css 请看下面的演示

angular.module('app', [])

.directive('tile', function() {

  return {
    restrict: 'E',
    scope: {},
    replace: true,
    template: '<div class="tile"></div> ',
    controller: function($scope) {

    },
    link: function(scope) {


    }
  };
});

.tile {
  background-color: red;
  height: 70px;
  width: 70px;
  margin: 4px 2px;
  display: inline-block;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='app'>

  <div class="wrap">

    <tile></tile>
    <tile></tile>
    <tile ng-repeat="t in [0, 1, 2, 3]"></tile>

  </div>
</body>

【讨论】：