Angularjs ng-repeat在列表元素之间创建不一致的间距

Question

我遇到了ng-repeat的问题，因为我没有获得列表元素之间的常量间距。例如，我已声明以下css ...

.test-grid {}

.test-grid ul {
    list-style: none;    
}

.test-grid li {
    display: inline-block;
    position: relative;
    background: red;    
}

...使用display: inline-block所以我可以创建一个跨越一行的列表。现在我写下以下html ...

<div class="test-grid">
  <ul>
     <li>{{ctrl.items[0]}}</li>
     <li>{{ctrl.items[1]}}</li> 
     <li>{{ctrl.items[2]}}</li>            
  </ul>
</div>

产生1中显示的输出，其中'tom'，'jerry'和'pluto'之间存在间隙......

如果我现在使用ng-repeat，就像这样......

<div class="test-grid">
    <ul>
        <li ng-repeat="$item in ctrl.items">
            {{$item}}
        </li>
    </ul>
</div>

然后我得到2中显示的输出，其中'tom'，'jerry'和'pluto'之间现在没有空格。如果我应该将ng-repeat移动到<ul>元素，就像这样......

<div class="test-grid">
    <ul ng-repeat="$item in ctrl.items">
        <li>
            {{$item}}
        </li>
    </ul>
</div>    

然后我得到上面3中显示的输出，其中列表项位于不同的行，并且由于某种原因，css格式化已丢失。我不知道为什么，但我认为1中的差距的原因是因为列表元素之间存在空格，例如...... <li>item<\li> <li>而不是<li>item<\li><li>。我猜这已经被ng-repeat删除了。

在这里使用ng-repeat的正确方法是什么？是否使用ng-repeat是否会产生一致的间距？理想情况下，我不希望列表元素之间没有间距。

注意，我正在编写一个html小部件库，我不知道用户是否会使用ng-repeat或不使用html来编写html，但我需要结果是相同的。这是代码的jsfiddle。

谢谢！

Answer 1

版本1和版本2都是正确的。如你所说，间距是由html中的格式与“display：inline-block”结合而来的。如果你将所有三个礼品放在一行上，你将不再有间距。

版本3不正确，因为它不是创建包含3个元素的列表，而是创建3个列表，每个列表包含1个元素。

要在版本1和版本2之间获得一致的结果，可以使用以下css：

.test-grid {
}

.test-grid ul {
    list-style: none;
    clear: both;
}

.test-grid li {
    display: block;
    float: left;
    position: relative;
    background: red;    
}

希望有所帮助！