Put three form buttons on a line [duplicate] - html

Question

This question already has answers here:
How can i Display div Elements in one row
(7 answers)
How to float 3 divs side by side using CSS?
(16 answers)
Closed 2 years ago.
I have 3 buttons that display in a vertical line and I want them to display horizontally
<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

Wrap them in a parent div and, in your CSS, set that div to display: flex.

Answer 2

In css add to each one of them float: left;

Answer 3

You can put each form and button inside individual <div>'s, wrap those <div>'s in a parent <div>, and then use 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

Use display:inline-block;
most people use flex but its not good becasue some of the old browsers can't understand flex.!
but all of the browsers support inline block