Совместите кнопки в одном ряду

Question

Я пытаюсь расположить эти кнопки в одном ряду. Я добавил кнопки в div и попробовал выравнивать по горизонтали и отображать свойства.

<div style="align-horizontal: center;">
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="INSTAGRAM" /></form>
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="TWITTER" /></form>
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="FACEBOOK" /></form>
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="DISCORD" /></form>
</div>

Answer 1

Я реорганизовал ваш код, поэтому не рекомендуется использовать так много форм, чтобы просто перейти на другой сайт для этого. Якорные теги уже присутствуют, которые по своей природе встроены, поэтому вам не требуется дополнительная проверка кода ниже.

a {
  text-decoration: none;
  background-color: #046738;
  padding: 15px 40px 15px 40px;
  border: none;
  color: white;
}

<div style="display:flex">
  <a href="#">INSTAGRAM</a>
  <a href="#">TWITTER</a>
  <a href="#">FACEBOOK</a>
  <a href="#">DISCORD</a>
</div>

Answer 2

Выровнять по горизонтали: не является допустимым CSS свойством.

Вы должны сделать следующее,

<div style="display:flex;align-items: center;">
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="INSTAGRAM" /></form>
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="TWITTER" /></form>
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="FACEBOOK" /></form>
<form action="#"><input style="background-color: #046738; padding: 15px 40px 15px 40px; border: none; color: white;" type="submit" value="DISCORD" /></form>
</div>

Это сделает ваш div flex-box, который затем позволяет элементы дочернего блока, такие как формы для выравнивания по центру.