KnockOutJS條件註釋在HTML中添加空間

Question

我有這個問題，但我不是100％肯定與KnockOutJS有關。在網格中，行內的某些按鈕是可選的，並且根據綁定項目的值顯示。我使用的條件結合表現出一定的按鈕或其他，但顯然，即使他們不顯示時，仍創造莫名其妙的空間：

正如你可以看到，這兩個之間會出現一個神奇的空間鈕釦。

這是其中的3列的模板代碼，因爲我寫的：

<td> 
    <a href="#" class="editDetails">Edit</a> 
    <a href="#" class="viewDetails">View</a> 
</td> 
<td> 
    <!-- ko if: (CanEdit()) --> 
     <a href="#" class="editPremium">Edit</a> 
    <!-- /ko --> 
    <!-- ko if: (!CanEdit()) --> 
     <a href="#" class="createCopy">Copy</a> 
    <!-- /ko --> 
    <a href="#" class="viewPremiums">View</a> 
</td> 
<td> 
    <a href="#" class="delete">Delete</a> 
</td> 

沒有與這些類相關的CSS。

正如你所看到的，有一個按鈕沒有被顯示，也許是另外兩個之間的空間的罪魁禍首。這是由谷歌Chrome瀏覽器的問題在於，TD表明生成的代碼：

<td> 
    <!-- ko if: (CanEdit()) --> 
     <a href="#" class="editPremium" style="visibility: visible;">Edit</a> 
    <!-- /ko --> 
    <!-- ko if: (!CanEdit()) --> 
    <!-- /ko --> 
    <a href="#" class="viewPremiums">View</a> 
</td> 

所以中間的按鈕不顯示（如預期），但其他兩個之間創建一個額外的空間。

我該如何獲得兩個按鈕之間的距離？

Answer 1

它會使用綁定visible嗎？

<td> 
    <a href="#" class="editPremium" data-bind="visible: CanEdit()">Edit</a> 
    <a href="#" class="createCopy" data-bind="visible: !CanEdit()">Copy</a> 
    <a href="#" class="viewPremiums">View</a> 
</td> 

或者，你可以嘗試圍繞元素的去除大部分的空間：

<td> 
    <!-- ko if: (CanEdit()) --><a href="#" class="editPremium">Edit</a><!-- /ko --> 
    <!-- ko if: (!CanEdit()) --><a href="#" class="createCopy">Copy</a><!-- /ko --> 
    <a href="#" class="viewPremiums">View</a> 
</td> 

在一般情況下，如果使用塊元素你必須與間距更小的麻煩。您可以使用div來包圍每個a或將a設爲display:block;並添加float:left;以使它們水平對齊。