删除按钮表单标记会导致换行

Question

我正在尝试将编辑和删除按钮并排放在下面的代码中。直到我为"delete_dealer_view"添加form标签。我也想知道为什么我需要form我不能只使用锚标签并调用 url？如果我不能用锚点包围它们，我不明白button标签的用途。

<div class="card">
<div class="card-header card-header-success">
All Dealers
</div>
<div class="card-body">
<table class="table">
<tbody>
{% for dealer in dealers %}
<tr>
<td>{{dealer.name}}</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Dealer" class="btn btn-white btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<form method="POST" action="{% url 'dealers:delete_dealer_view' dealer.slug %}">
{% csrf_token %}
<button type="submit" rel="tooltip" title="Remove" class="btn btn-white btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>

Answer 1

首先，您的按钮不是同时处于以下形式：

<button type="button" rel="tooltip" title="Edit Dealer" class="btn btn-white btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<form method="POST" action="{% url 'dealers:delete_dealer_view' dealer.slug %}">
{% csrf_token %}
<button type="submit" rel="tooltip" title="Remove" class="btn btn-white btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</form>

尝试将按钮移动到窗体中：

<form method="POST" action="{% url 'dealers:delete_dealer_view' dealer.slug %}">
<button type="button" rel="tooltip" title="Edit Dealer" class="btn btn-white btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
{% csrf_token %}
<button type="submit" rel="tooltip" title="Remove" class="btn btn-white btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</form>

可能无法修复它，但可能会导致问题。

问候 乔希