ng Repeat 中的简单指令和相同指令之间的差异 space

Question

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

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

<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) {}
        };
    })

指令cssclass.tile：

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

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

Answer 1

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

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

ng Repeat 中的简单指令和相同指令之间的差异 space

Different space between simple directive and same directives in ngRepeat

javascript

css

angularjs

angularjs-directive

ng-repeat