KnockOutJS条件注释在HTML中添加空间

我有这个问题，但我不是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

正如你所看到的，有一个按钮没有显示出来，可能是其他两个按钮之间的空间的罪魁祸首。这是Google 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>

因此，中间的按钮不会显示（如预期的那样），但会在其他两个按钮之间创建一个额外的空间

---

我怎样才能利用两个按钮之间的空间呢？

使用

可见的
绑定是否有效

<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
样式设置为
显示：块和添加<代码>浮动：左使它们水平对齐。
右侧。如果我内联所有元素，空间就会消失。但为什么渲染那个些空间是因为解断线？我不知道为什么。我用更多的信息扩展了我的答案。疯狂的东西。非常感谢：）