Как сделать так, чтобы кнопка вне формы выравнивалась с кнопкой внутри формы?

Мне кажется, что это относительно простая укладка, но я не могу понять, как это сделать.

Мой код: 

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

Ваше самое простое решение - поместить кнопку отмены в форму, поскольку ваша форма является элементом уровня блока, она не позволит вам поместить ее рядом с ней, если вы не измените ее на элемент уровня inline. или сделайте родителя flexblox или grid контейнером.

Решение: 

.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>. Это потому, что вам не разрешается помещать тег якоря внутри кнопки или кнопку внутри якоря.

Вернуться на верх