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, связанного с этими классами.

Как вы можете видеть, есть кнопка, которая не отображается, и, возможно, виновник этого пространства между двумя другими. Это код, сгенерированный, как указано в 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> 

Так средняя кнопка не отображается (как и ожидалось), но дополнительное пространство создается между двумя другими.

Как я могу добраться до этого пространства между двумя кнопками?

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;, чтобы они выровнялись по горизонтали.