0

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

所以中间按钮没有显示（如预期的那样），但在其他两个按钮之间创建了一个额外的空间。

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

4

1 回答 1

2

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

一般来说，如果你使用块元素，你在间距方面会遇到更少的麻烦。您可以使用 adiv来包围每个，也可以a设置aasdisplay:block;并添加float:left;以使它们水平对齐。

于 2013-03-06T20:07:55.530 回答