html - 对齐同一行的按钮

Question

我试图让这些按钮在同一行上对齐。我已将按钮添加到 div 中并尝试了 align-horizo​​ntal 和 display 属性。

<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

Align-horizo​​ntal: 不是有效的 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，然后允许子块元素(例如表单)居中对齐。