角：为什么不CSS的理由与NG-重复的工作？ [英] Angular: Why doesn't CSS justification work with ng-repeat?

问题描述

我试图做

我想均匀空间里在 UL （证明）。 CSS的工作时，我很难code中的里，但是当我使用 NG-重复的CSS是不再适用。

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.

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/

预期结果

这两个列表应该有每个李之间的间隔。

Both lists should have space between each li.

实际结果

与生成的NG-重复的列表中有之间没有空格，每个里。

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

为什么会出现这种情况？

推荐答案

的里元素（必需的理由）不与角的重复发出之间的空白。您也可以因此被反复包裹空格。你可以这样做：

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:

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

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

这篇关于角：为什么不CSS的理由与NG-重复的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！