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

What I'm trying to do

我想做什么

I'm trying to evenly space the li in a ul (justify). The CSS works when I hardcode the li, but when I use ng-repeat, the CSS is no longer applied.

我试图在一个ul（辩解）中均匀地分隔李。当我对li进行硬编码时，CSS会起作用，但是当我使用ng-repeat时，CSS就不再应用了。

HTML

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

CSS

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

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

The fiddle

小提琴

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

Expected result

预期结果

Both lists should have space between each li.

两个列表在每个li之间应该有空格。

Actual result

实际结果

The list generated with ng-repeat has no space between each li.

使用ng-repeat生成的列表在每个li之间没有空格。

Why is this happening?

为什么会这样？

2 个解决方案

#1

The whitespace between the li elements (necessary for the justification) is not emitted with Angular's repetition. You also have to wrap the whitespace so it gets repeated. You can do something like:

li元素之间的空格（理由所必需的）不会随着Angular的重复而发出。你还必须包装空格，以便重复。你可以这样做：

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

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

#2

-1

have you tried

你有没有尝试过

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

and float the li elements?

并浮动li元素？

css:

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

#1