如何制作html表单堆栈

Question

更新：现在是这样的：新布局

这是表单的html/css：

{% extends 'base.html' %}
{% block content %}
<form action="/join/" method="post">
{% csrf_token %}
{{ form }}
<div style="text-align:center">
<div class="button">
<div class="container">
<div class="tick">
</div>
</div>
</div>

<style>
form {
display: flex;
flex-direction: column;
background: #d2dce1;
padding: 4vh 3vh;
}


body, .button, .tick {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}

body {
width: 100%;
height: 90vh;
}

.button {
width: 300px;
height: 80px;
background: rgba(221, 68, 68, 0.867)0;
border-radius: 6px;
transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
}

.button svg {
transform: rotate(180deg);
transition: all .5s;
}

.button__circle {
width: 120px;
height: 120px;
background: rgba(221, 68, 68, 0.867);
border-radius: 50%;
transform: rotate(-180deg);
}

.button:hover {
cursor: pointer;
}

.tick {
color: white;
font-size: 2em;
transition: all .9s;
}
</style>

<script>
let button = document.querySelector('.button');
let buttonText = document.querySelector('.tick');

const tickMark = "<svg width="58" height="45" viewBox="0 0 58 45" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="nonzero" d="M19.11 44.64L.27 25.81l5.66-5.66 13.18 13.18L52.07.38l5.65 5.65"/></svg>";

buttonText.innerHTML = "Submit";

button.addEventListener('click', function() {

if (buttonText.innerHTML !== "Submit") {
buttonText.innerHTML = "Submit";
} else if (buttonText.innerHTML === "Submit") {
buttonText.innerHTML = tickMark;
}
this.classList.toggle('button__circle');
});

</script>

</div>
</form>
{% endblock %}

我想把这些字段和按钮一个叠在另一个上面，比如5高1宽。我该怎么做？我在网上找不到任何东西。即使我把它们对准中心，它们也会有点混乱，但我希望它们能整齐地叠在一起。

更新：我遵循了下面检查的答案，现在文本字段已经排好了，但按钮仍然在左边。我该如何修理按钮？

Answer 1

将这些添加到form
还可以查看flexbox

display: flex;
flex-direction: column;

form {
display: flex;
flex-direction: column;
background: #d2dce1;
padding: 4vh 3vh;
}

<form>
<label for="a">a</label>
<input id="a" type="text" />
<label for="a">a</label>
<input id="a" type="text" />
<label for="a">a</label>
<input id="a" type="text" />
<label for="a">a</label>
<input id="a" type="text" />
<button type="submit">Submit</button>
</form>

Answer 2

您可以使用"形式"；元素一样，在form元素内部，几个输入嵌套了不同的类型。您还应该使用css为form元素赋予样式。

你可以在w3school网站上阅读这篇文章：https://www.w3schools.com/html/html_forms.asp

并且这个：https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms