私はこの問題を抱えていますが、それが 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 つのボタンの間のスペースをどのように利用できますか?