Skip to content Skip to sidebar Skip to footer

Angular: Why Doesn't Css Justification Work With 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. HTML

Solution 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:

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

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

Solution 2:

have you tried

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

and float the li elements?

css:

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



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

Post a Comment for "Angular: Why Doesn't Css Justification Work With Ng-repeat?"