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

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;}

我想要以下格式:

表单域
..
..
..
..
按钮

在中间:button1-button2

Answer 1

尝试使用 HTML table

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