Putting Submit button at the bottom of the form

问题

I want the submit button to be at the bottom of the form. I have tried using <div>, <div float="left">, <div float="right">, <br> and <span>. So far the only solution I have come up with is to repeat <br> multiple times which is a messy solution and one that is only compatible on laptops the same size as mine.

 <form method="post" action="">
      {% csrf_token %}

      {% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}

<div float="left">
{# Include the visible fields #}
{% for field in form.visible_fields %}
    <br class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} 
</br>


        {{ field }}

{% endfor %}

      </div>
      <div float="right"><input type="submit" value="Submit"></div>



    </form>

Update I tried Gumbos suggestion (CSS How to place a submit button on a new line?). But there is something about the map which is making the submit button act strangely. For testing purposes I created a submit button after every field. Gumbos suggestion worked fine for text boxes and list boxes. But not maps.

{% extends "blog/base.html" %}

{% block content %}

{% load crispy_forms_tags %}


<html>



<head>
<style>
  input[type=submit] {display: block}
</style>
{{ form.media }}



</head>



 <body>

    <form method="post" action="">
        {% csrf_token %}
        {% for hidden in form.hidden_fields %}
        {{ hidden }}
        {% endfor %}

        {# Include the visible fields #}
        {% for field in form.visible_fields %}

        <br class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} 
        </br>
        {{ field }}
        <input type="submit" value="Submit">
        {% endfor %}
  </form>



</body>

</html>

{% endblock content %}

回答1:

I think you need to remove the float and change br into div

<form method="post" action="">
  {% csrf_token %}

  {% for hidden in form.hidden_fields %}
  {{ hidden }}
  {% endfor %}

  <div>
    {# Include the visible fields #}
    {% for field in form.visible_fields %}

    <div className="fieldWrapper">
      {{ field.errors }}
      {{ field.label_tag }}
    </div>

    {{ field }}

    {% endfor %}

  </div>
  <div><input type="submit" value="Submit"></div>
</form>

来源：https://stackoverflow.com/questions/62354598/putting-submit-button-at-the-bottom-of-the-form

标签

html

css

django

django-forms