0

私はこの問題を抱えていますが、それが KnockOutJS に関連しているとは 100% 確信が持てません。グリッドでは、行内のボタンの一部はオプションであり、バインドされたアイテムの値に応じて表示されます。条件付きバインディングを使用していくつかのボタンなどを表示していますが、明らかに、それらが表示されていない場合でも、何らかの形でスペースを作成しています:

ここに画像の説明を入力

ご覧のとおり、これら 2 つのボタンの間に魔法のスペースが表示されます。

これは、私が書いた 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 はありません。

ご覧のとおり、表示されていないボタンがあり、他の 2 つのボタンの間のスペースが原因である可能性があります。これは、問題のある TD に対して Google Chrome によって示されるように生成されたコードです。

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

したがって、中央のボタンは (予想どおり) 表示されませんが、他の 2 つのボタンの間に余分なスペースが作成されます。

2 つのボタンの間のスペースをどのように利用できますか?

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>

一般に、ブロック要素を使用すると、間隔に関する問題は少なくなります。a を使用しdivてそれぞれを囲むか、 asをaスタイルして追加して水平方向に整列させることができます。adisplay:block;float:left;

于 2013-03-06T20:07:55.530 に答える