html - 容器中的等距div

下面是我的例子：http://jsfiddle.net/rtCP3/62/
我有3个（或更多！）我想在一个容器中平均分配空间。对ng重复使用angular时，不会拾取样式。当我硬编码完全相同的元素时，它工作得很好。
角度输出：

<div class="container ng-scope" ng-controller="ParentCtrl">
     <!-- ngRepeat: item in list -->
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item1</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item2</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item3</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item4</div>
     <span class="stretch"></span>
</div>

硬编码：

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <span class="stretch"></span>
</div>

我基于这个stackoverflow问题：Fluid width with equally spaced DIVs

最佳答案

这很管用。我不知道为什么，但它的空间是一样的：

 <div class="container" ng-controller="ParentCtrl">
     <span data-ng-repeat="item in list">
         <div class="box">{{ item.name }}</div>
     </span>
     <span class="stretch"></span>
 </div>

也许其他人可以解释为什么这样做，但是在您的小提琴上重复了SPAN元素，但是里面的box类使两个实现看起来相同。