間距相等div的容器中的

Question

這是我的例子：http://jsfiddle.net/rtCP3/62/

我有3個（或更多！）div的我希望空間在一個容器平分。在ng-repeat中使用角度時，樣式不會被拾取。當我硬編碼完全相同的元素時，它工作得很好。

角度輸出：

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

我此基礎上這個計算器的問題：Fluid width with equally spaced DIVs

Answer 1

這工作。我不知道爲什麼，但它的空間是相同的：

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

也許別人可以解釋爲什麼這樣的作品，但在你的提琴重複跨度元素框類上，但裏面提出兩種實現看相同。

Answer 2

在SO問你引用一個評論說

我花了3h的發現，你應該在HTML中，每框之間的空間。 '證明'擴展了元素之間的空間，如果你的內容是<div/><div/><div/>它不起作用。你需要有<div/> <div/> <div/>。

我相信ng-repeat不會在它的輸出之間放置任何空格，所以所有的div都相互對立，造成問題。

你可以創建自己的ng-repeat-like指令來添加一個空格。