html - 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或没有，但我需要结果是相同的。这是 jsfiddle的代码。

谢谢!

Answer 1

版本 1 和 2 都是正确的。正如您所说，间距是由 html 中的格式与“显示:内联 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;    
}

希望对您有所帮助!