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' 之间现在没有 space。如果我应该将 ng-repeat 移动到 <ul> 元素，就像这样...

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

然后我得到上面 3 中所示的输出，其中列表项在不同的行中，并且由于某种原因 css 格式已经丢失。我不知道为什么，但我认为 1 中出现差距的原因是因为列表元素之间有白色 space，例如... <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" 相结合产生的。如果将所有三个 li-item 放在一行中，您将不再有间距。

版本 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;    
}

希望对您有所帮助！

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

Angularjs ng-repeat creating inconsistent spacing between list elements

html

css

angularjs

ng-repeat