我的提交按钮不在表单底部和其他对齐问题

Question

我正在尝试制作一个带有提交按钮和最后另外两个按钮的表单，但不幸的是，它们的对齐方式都搞砸了。

<article id="form2">
<div>
<h1 id = "h1form2">Suggest us a book</h1>
<form method = "post" action="suggestion.php" required>
<label>Name of the book:</label><input type="text" name="name" id = "form21"></br>
<label>Year of publication:</label><input type="number" name="year" id = "form22"></br>
<label>Author:</label><input type="text" name="author" id = "form23"></br>
<label>Why this book</label>
<textarea name="why" cols="40" rows="5" id="form24"></textarea></br>
<button type="submit" class="button25">Subscribe</button></br>
</form>
</div>
</article></br>
</br><article id = "twobuttons">
<div id = "twobuttons">
<button type="button" id = "buttoninfo" onclick="window.location.href='moreinfo.html'">More info</button>
<button type="button" id ="buttonsuggest" onclick="window.location.href='suggest.html'">Suggest</button>

.CSS：

#form21{width: 30%;padding: 7px;margin-left: 5px;display: inline-block;float: left;}
#form22{width: 30%;padding: 7px;margin: 10px;display: inline-block;float: left;}
#form23{width: 30%;padding: 7px;margin: 10px;display: inline-block;float: left;}
#form24{width: 30%;padding: 7px;margin: 10px;display: inline-block;float: left;}
#button25{width: 30%;padding: 7px;margin: 10px;float: left;}

我想要以下格式：

表单字段.
.
..
..
..
按钮

中间：按钮1-按钮2

Answer 1

使用 HTMLtable试试这个

.footer-buttons {
display: flex;
justify-content: center;
}

<article id="form2">
<div>
<h1 id="h1form2">Suggest us a book</h1>
<form method="post" action="suggestion.php" required>
<table>
<tr>
<td>Name of the book:
</td>
<td><input type="text" name="name" id="form21">
</td>
</tr>
<tr>
<td>Year of publication:
</td>
<td><input type="number" name="year" id="form22">
</td>
</tr>
<tr>
<td>Author:
</td>
<td><input type="text" name="author" id="form23">
</td>
</tr>
<tr>
<td>Why this book
</td>
<td> <textarea name="why" cols="40" rows="5" id="form24"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><button type="submit" class="button25">Subscribe</button>
</td>
</tr>
</table>
</form>
</div>
</article>
<div class="footer-buttons">
<button type="button" id="buttoninfo" onclick="window.location.href='moreinfo.html'">More info</button>
<button type="button" id="buttonsuggest" onclick="window.location.href='suggest.html'">Suggest</button>
</div>