Angular：为什么 CSS 对齐不适用于 ng-repeat？

Question

我要做什么

我正在尝试将li 均匀分布在ul 中（证明）。当我对li 进行硬编码时，CSS 可以工作，但是当我使用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 之间没有空格。

为什么会这样？

Answer 1

li 元素之间的空格（证明所必需的）不会随着 Angular 的重复而发出。您还必须包装空格以便重复。您可以执行以下操作：

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

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

Answer 2

你试过了吗

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

并浮动 li 元素？

css:

.two-column {
    list-style: none;
    padding: 0;
}



.two-column li {
    background-color: #f00;
    border: 1px solid #000;
    display: inline-block;
    height: 50px;
    width: 100px;
    margin-left:10px;
margin-top:10px;
    float:left;
}