（不）使用 ng-repeat 时的奇怪风格行为

Question

我需要在引导模式中显示一个复选框列表。我正在使用角度 ng-repeat 来显示各种复选框，并且工作正常：

<label class="checkbox-inline" ng-repeat="l in ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']">
    <input type="checkbox" value="{{ l }}" /> {{ l }}
</label>

然后我唯一改变的是手动创建所有复选框：

<label class="checkbox-inline">
    <input type="checkbox" value="A" /> A
</label>
<label class="checkbox-inline">
    <input type="checkbox" value="B" /> B
</label>
....

字母后面有一点空格，破坏了样式。

这可能是一件愚蠢的事情，但我真的不明白这种风格的变化来自哪里！有人知道为什么不使用 ng-repeat 时会有额外的空间吗？

这是一个小提琴https://jsfiddle.net/4hkw8h43/ 第一个按钮打开没有 ng-repeat 的模态，第二个按钮打开 ng-repeat...

Answer 1

正如您已经发现的，这是使用display: inline-block; 水平对齐内容时经常出现的空白问题。我不能告诉你为什么会在这种情况下发生，但如何解决它。此修复程序将来会对您有用。

要修复它，请执行以下操作：

.whitespace-eliminator {
    font-size: 0;
}
.whitespace-eliminator label {
    font-size: 14px;
}

https://jsfiddle.net/4hkw8h43/2/

所以基本上，在父级上设置font-size: 0; 会使空白在视觉上消失。之后，您必须在内部重置仍具有 font-size: inherit; 的子元素的字体大小。