Angular: Почему CSS-выравнивание не работает с ng-repeat?

Question

Что я пытаюсь сделать

Я пытаюсь равномерно распределить li в ul (Оправдать). CSS работает, когда я жестко li, но когда я использую ng-repeatCSS больше не применяется.

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