Put three form buttons on a line

Question

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>

Does this answer your question? [How can i Display div Elements in one row](https://stackoverflow.com/questions/23799877/how-can-i-display-div-elements-in-one-row) — Paweł Własiuk, Jun 08 '20 at 18:38

score 2 · Answer 1 · answered Jun 08 '20 at 18:34

2

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

answered Jun 08 '20 at 18:34

Daniel_Knights

7,940
4
21
49

HappyHands31 · Answer 2 · 2020-06-08T23:08:02.220

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>

score 1 · Answer 3 · answered Jun 08 '20 at 18:39

1

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

answered Jun 08 '20 at 18:39

Yuval.R

1,182
4
15

1

That would be a good solution... 10 years ago – AdamKniec Jun 08 '20 at 18:41
What makes it not good? Is it slow? – Yuval.R Jun 08 '20 at 18:48
float:left might work just fine but for that case, it's much better practice to use display:flex because it gives the same result and allows you to use a lot of more parent-related properties from CSS Flexbox – AdamKniec Jun 08 '20 at 18:50

score 0 · Answer 4 · answered Jun 08 '20 at 18:55

0

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

answered Jun 08 '20 at 18:55

SoliMoli

781
2
6
25

False. https://caniuse.com/#search=display%3Aflex – AdamKniec Jun 08 '20 at 19:20
Chrome and FireFox and IE old vers can't run it its totally true.! – SoliMoli Jun 08 '20 at 19:22
Did You make sure that these browsers are even supported ? ;) – AdamKniec Jun 08 '20 at 19:24
Dude your web should support every single browsers... :) that means you are a pro ui designer because everyone can use flex but its only you that can do something special :) – SoliMoli Jun 08 '20 at 19:26
and of course even last version of IE is partial supported. lots of users still use IE so... ? – SoliMoli Jun 08 '20 at 19:27
Good luck than sir ! – AdamKniec Jun 08 '20 at 19:28

Put three form buttons on a line

4 Answers4