html - 如何让表单外的按钮与表单内的按钮对齐？

Question

我觉得这是相对简单的造型，但我一生都无法弄清楚如何去做。

我的代码：

<div class="container py-5">
   <div class="pull-left" style="margin-right:5px">
      <form method="post">
         {% csrf_token %}
         <p>
         <h3>
            Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
         </h3>
         </p>
         <button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
      </form>
   </div>
   <a href="{% url 'entry-detail' entry.id %}">
   <button class="btn btn-secondary">Cancel</button>
   </a>
</div>

我希望确认和取消按钮彼此相邻对齐，但是如果我将取消放在确认按钮旁边或表单内的 div 中，它也会执行删除操作。

在 Django 中使用 Bootstrap。

标签： htmlcssdjangotwitter-bootstrap

Answer 1

您最简单的解决方案是将取消按钮也放在表单中，因为您的表单是块级元素，除非您将其更改为内联级元素，否则它不会让您将其放在旁边。或使父级成为 flexblox 或网格容器。

解决方案：

.button--container {
  display: flex;
  justify-content: space-between
}

<div class="container py-5">
   <div class="pull-left" style="margin-right:5px">
      <form method="post">
         {% csrf_token %}
         <p>
         <h3>
            Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
         </h3>
         </p>
         <div class="button--container">
           <button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
           <a class="btn btn-secondary" href="{% url 'entry-detail' entry.id %}">Cancel</a>
         </div>

      </form>
   </div>

</div>

您还会注意到我已将您的标记从 更改<a><button /></a>为<a></a>。这是因为您不允许在按钮内放置锚标记或在锚内放置按钮。