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.

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

The fiddle

/

Expected result

Both lists should have space between each li.

Actual result

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

Why is this happening?

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.

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

The fiddle

http://jsfiddle/RyanWalters/M8228/

Expected result

Both lists should have space between each li.

Actual result

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

Why is this happening?

• javascript
• css
• angularjs

2 Answers 2

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/M8228/1/

have you tried

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

and float the li elements?

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