Kątowe: Dlaczego uzasadnienie CSS nie działa z powtórzeniem ng?

Question

Co usiłuję zrobić

Staram się równomiernie Space li w ul (uzasadnić). CSS działa, gdy koduję kod li, ale kiedy używam ng-repeat, CSS nie jest już stosowany.

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

skrzypcach

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

Oczekiwany wynik

Obie listy powinny zawierać odstępy między poszczególnymi li.

Rzeczywisty wynik

Lista generowana z ng-repeat ma przestrzeń pomiędzy każdym li.

Dlaczego tak się dzieje?

Answer 1

Biała spacja pomiędzy elementami li (niezbędna do uzasadnienia) nie jest emitowana z powtórzeniem Angulara. Musisz również zawinąć białe spacje, aby się powtórzyły. Można zrobić coś takiego:

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

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

Answer 2

próbowałeś

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

i float li elementy?

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