Angular：为什么 CSS 对齐不能与 ng-repeat 一起使用？

我正在尝试做什么

我正在尝试均匀分布li in a ul（证明合法）。当我硬编码时 CSS 可以工作li，但是当我使用ng-repeat，不再应用CSS。

HTML

<div ng-app="SampleApp">
    <div ng-controller="ListCtrl">
        <ul class="two-column">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="two-column">
            <li ng-repeat="item in items"></li>
        </ul>
    </div>
</div>

CSS

.two-column {
    text-align: justify;
}

.two-column:after {
    content: '';
    display: inline-block;
    width: 100%;   
}

小提琴

http://jsfiddle.net/RyanWalters/M8228/

预期结果

两个列表之间应该有空格li.

实际结果

生成的列表ng-repeat每个之间没有空间li.

为什么会发生这种情况？

之间的空白li元素（论证所必需的）不会随着 Angular 的重复而发出。您还必须将空白换行，以便重复出现。你可以这样做：

<span ng-repeat-start="item in items"></span>
    <li></li>
<span ng-repeat-end></span>

http://jsfiddle.net/M8228/1/