How to row-align 3 buttons with a form each?

Question

I am trying to align 3 buttons in a row but so far nothing has worked. I have emptied my CSS. What is the best way to achieve a line row with the buttons?

Maybe there is a way to do this code with only 1 form.

HTML

 <form action="link1" method="post"><button type="submit">Button 1</button></form>
 <form action="link2" method="post"><button type="submit">Button 2</button></form>
 <form action="link3" method="post"> <button type="submit">Button 3</button></form>

Screenshot of the page

Thank you very much!

UPDATE:

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="/static/style.css">  
</head>
<body>

<div class='container'>
  <form action="#" method="post"><button type="submit">Button 1</button></form>
  <form action="#" method="post"><button type="submit">Button 2</button></form>
  <form action="#" method="post"> <button type="submit">Button 3</button></form>
</div>
</body>
</html>

CSS:

.container {
    display:flex
}

UPDATE 2: Error was fixed, it was in the path because I am using Flask I need to put the CSS inside a CSS folder. Now it is working. Thank you very much!

@Patricia Bota, please, try to set `display:flex` for the container of these 3 forms. Let me know if it works. — Asking, May 01 '20 at 11:01
@AskMen CSS .containter{ display:flex; } HTML

Did not work :( — stracc, May 01 '20 at 11:06
@PatriciaBota, please, check the path: . It is 100% correct? — Asking, May 01 '20 at 11:35
@AlpErenGül ``` .grid-container { display: inline-grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } ``` — stracc, May 01 '20 at 11:38
use .grid-container { display: grid; grid-column-gap: 50px; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } — Alp Eren Gül, May 01 '20 at 12:34

score 1 · Accepted Answer · answered May 01 '20 at 11:10

1

.container {
display:flex
}

<div class="container" >
  <form action="link1" method="post"><button type="submit">Button 1</button></form> <form action="link2" method="post"><button type="submit">Button 2</button></form> <form action="link3" method="post"> <button type="submit">Button 3</button>
  </form> 
</div>

answered May 01 '20 at 11:10

Asking

3,487
11
51
106

1

@Patricia Bota, is this what you want to achieve? – Asking May 01 '20 at 11:11
Thank you. very much for your help! But I still get the buttons in a column.. Should I have any link in the HTML head? – stracc May 01 '20 at 11:18
1

@PatriciaBota, please show more your code. If you put the forms inside container and set it to display:flex then you won't have issues. Probably is something wrong with your code – Asking May 01 '20 at 11:20
I edited my question with your solution and my entire code. – stracc May 01 '20 at 11:27

How to row-align 3 buttons with a form each?

1 Answers1