将三个表单按钮放在一条线上

Question

我有 3 个按钮以垂直线显示，我希望它们水平显示

<form method="twitch" action= "https://www.twitch.tv/">
<button type="submit"><img src="img/twitch.png" alt="Twitch"></button>
</form>
<form method="Instagram" action="https://www.instagram.com/">
<button type="submit"><img src="img/instagram.png" alt="Instagram" > </button>
</form>
<form method="linkedin" action="https://www.linkedin.com/">
<button type="submit"><img src="img/linkedin.png" alt="Linkedin" ></button>
</form>

Answer 1

将它们包装在父div中，并在CSS中将该div设置为display: flex。

Answer 2

在 css 中，将它们添加到每个float: left;

Answer 3

您可以将每个form和button放在单独的<div>中，将这些<div>包装在父<div>中，然后使用flex：https://jsfiddle.net/HappyHands31/hnkqsjba/2/

.container {
display: flex;
}
.first, .second, .third {
display: flex;
}

<div class="container">
<div class="first">
<form method="twitch" action= "https://www.twitch.tv/">
<button type="submit"><img src="img/twitch.png" alt="Twitch">
</button>
</form>
</div>
<div class="second">
<form method="Instagram" action="https://www.instagram.com/">
<button type="submit"><img src="img/instagram.png" alt="Instagram" ></button>
</form>
</div>
<div class="third">
<form method="linkedin" action="https://www.linkedin.com/">
<button type="submit"><img src="img/linkedin.png" alt="Linkedin" > </button>
</form>
</div>

Answer 4

使用 display：inline-block; 大多数人使用Flex，但它不好，因为一些旧浏览器无法理解Flex。 但是所有浏览器都支持内联块