Как иметь несколько кнопок отправки в одной строке, даже если это разные формы отправки, используя Python Django?

Я делаю что-то вроде контрольного списка/приложения на Python Django, и у меня есть форма обновления, где я могу сохранить обновления, отметить их как завершенные или незавершенные или удалить элемент.

Текущий код отображает кнопку сохранения в одной строке, так как она находится в форме с другими данными для обновления элемента. кнопки завершения и удаления находятся в отдельной строке.

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

Я пытался использовать Chatgpt, чтобы получить ответ, и если я получаю все кнопки в одной строке, функции/кнопки или пометка как важные перестают работать.

{% extends 'BJJApp/base.html' %}

{% block content %}

<div class="row justify-content-center mt-5">
    <div class="col-md-5">
        <h2>New Item</h2>
    </div>
</div>

<div class="row justify-content-center mt-5">
   <div class="col-md-5">
        {% if error %}
        <div class="alert alert-danger" role="alert">
            {{ error }}
        </div>
        {% endif %}

        <div class="container">
            <!-- Main Form for saving item -->
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" name="title" class="form-control" id="title" value="{{ item.title }}" required>
                </div>
            <div class="form-group">
                <label for="memo">Memo</label>
                <textarea name="memo" rows="5" class="form-control" id="memo">{{ item.memo }}</textarea>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" name="important" class="form-check-input" id="important" {% if item.important %}checked{% endif %}>
                <label class="form-check-label" for="important">Important</label>
            </div>
            <button type="submit"  class="btn btn-primary">Save</button>
        </form>

        <!-- Buttons Row -->
        <!-- Complete Button Form (if item is not completed) -->
        {% if item.datecompleted is None %}
        <form method="POST" action="{% url 'completeitem' item.id %}" style="display:inline-block;">
            {% csrf_token %}
            <button type="submit" class="btn btn-success">Complete</button>
        </form>
        {% endif %}

        <!-- UnComplete Button Form (if item is completed) -->
        {% if item.datecompleted %}
        <form method="POST" action="{% url 'uncompleteitem' item.id %}" style="display:inline-block;">
            {% csrf_token %}
            <button type="submit" class="btn btn-success">UnComplete</button>
        </form>
        {% endif %}

        <!-- Delete Button Form -->
        <form method="POST" action="{% url 'deleteitem' item.id %}" style="display:inline-block;">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">Delete</button>
        </form>
    </div>
    </div>
</div>
</div>
<br><br>

    {% endblock %}

Функция работает, но я не могу собрать их в одну строку!

Спасибо

Это не проблема Django или Python, а проблема стилизации HTML и CSS

Вы можете переместить кнопку сохранения в строку кнопок и использовать атрибут формы.

Вам может понадобиться или не понадобиться встроенная форма CSS

This is a styling issue. Typically a <form> [mdn-doc] has a block as display style [mdn-doc].

Вы можете изменить это на inline-block или inline:

form {
    display: inline-block;
}
Вернуться на верх