HTML и CSS, выровняйте 2 кнопки по горизонтали, не теряя действие формы

Question

Каждая из этих двух кнопок вызывает внешнюю страницу 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>

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

display: flex в CSS выравнивает все связанные элементы по горизонтали.

Answer 2

Вы можете попробовать применить «display: inline» к обеим кнопкам.

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