HTML 和 CSS，水平对齐 2 个按钮而不会丢失表单操作答案

【问题标题】：HTML and CSS, align 2 buttons horizontally without losing the form actionHTML 和 CSS，水平对齐 2 个按钮而不会丢失表单操作
【发布时间】：2020-03-06 10:26:44
【问题描述】：

这两个按钮中的每一个都调用一个外部 php 页面。它们在页面上的显示方式都是垂直对齐的。我怎样才能使水平对齐彼此，当然不丢失表单动作。？看截图

代码如下，非常感谢。

<form action="reboot.php" method="get">
  <button class="button button3" type="submit">Server Reboot</button>
</form>

<form action="shutdown.php" method="get">
  <button class="button button3" type="submit">Server Shutdown</button>
</form>

【问题讨论】：

标签： html css forms button

【解决方案1】：

你可以这样做！

<div class="form-wrapper">
<form action="reboot.php" method="get">
  <button class="button button3" type="submit">Server Reboot</button>
</form>

<form action="shutdown.php" method="get">
  <button class="button button3" type="submit">Server Shutdown</button>
</form>
</div>

.form-wrapper{
    display: flex;
}

CSS 中的display: flex 水平对齐其所有包含的项目。

【讨论】：

【解决方案2】：

您可以尝试在两个按钮上应用“显示：内联”。

<form action="reboot.php" method="get" class="inline">
  <button class="button button3" type="submit">Server Reboot</button>
</form>

<form action="shutdown.php" method="get" class="inline">
  <button class="button button3" type="submit">Server Shutdown</button>
</form>

.inline {
    display: inline;
}

【讨论】：