Question

问题是：简单指令和ngRepeat中的相同指令之间有很大的空间（如果是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) {}
        };
    })

指令css类.tile：

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

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

Answer 1

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

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中的简单指令和相同指令之间的不同空间重复

2 个答案: