Make two Form buttons side-by-side

Question

I have two form buttons that are stretched out to my container. and it is displayed line by line. Is there any way to make it side by side and centralised?

.submit1 {
  background-color: #008CBA;
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  border: none;
}

.submit2 {
  background-color: #BA002D;
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  border: none;
}

<html>

<body>
  <form action="listingsPage.php" method="post">
    <input type="submit" value="Express Interest" class="submit1">
  </form>

  <form action="listingsPage.php" method="post">
    <input type="submit" value="Back to Listings" class="submit2">
  </form>
</body>

</html>

Image of Output: https://ibb.co/rctwhTH

Why do you have two separate forms? That's what's causing the issue... Also, the code you posted does not produce the output you show (please repost using the image icon in the editor toolbar). — Heretic Monkey, Jan 22 '21 at 19:25

score 3 · Accepted Answer · answered Jan 22 '21 at 19:27

Do you want like this:

.submit1 {
    background-color: #008CBA;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    border: none;
}
.submit2 {
    background-color: #BA002D;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    border: none;
}

.form1 {
  display:inline-block;
}
.center {
  text-align:center;
}

 <body>
   <div class="center">
     <form class="form1" action ="listingsPage.php" method="post">
        <input type="submit" value="Express Interest" class="submit1">
    </form>
    
    <form class="form1" action ="listingsPage.php" method="post">
        <input type="submit" value="Back to Listings" class="submit2">
    </form>
   </div>
  </body>

This works, if you have labels you can add these too `label { width:0rem; display: inline-block; }` — Bitfinicon, Jan 03 '23 at 17:45

score 1 · Answer 2 · answered Jan 22 '21 at 19:28

1

Add this to your buttons

#button1 , #button2 {
display:inline-block;
/**other codes**/
}

answered Jan 22 '21 at 19:28

VeryBadCoder

66
5

The buttons already have `display: inline-block` in their rulesets... – Heretic Monkey Jan 22 '21 at 19:29

score 1 · Answer 3 · answered Jan 22 '21 at 19:31

use flexbox, it will save you a lot of work

.submit1 {
  background-color: #008CBA;
  color: white;
  text-align: center;
  
  font-size: 18px;
  border: none;
}

.submit2 {
  background-color: #BA002D;
  color: white;
  text-align: center;
  
  font-size: 18px;
  border: none;
}

#container{
display:flex;
justify-content:center}

<html>

<body>
<div id='container'>
  <form action="listingsPage.php" method="post">
    <input type="submit" value="Express Interest" class="submit1">
  </form>

  <form action="listingsPage.php" method="post">
    <input type="submit" value="Back to Listings" class="submit2">
  </form>
</div>
</body>

</html>

Arik Jordan Graham · Answer 4 · 2021-01-22T19:33:21.430

Try to add style to the forms elements , like so:

html:

<body>
  <form action="listingsPage.php" method="post" class="form1">
    <input type="submit" value="Express Interest" class="submit1">
  </form>

  <form action="listingsPage.php" method="post" class="form1">
    <input type="submit" value="Back to Listings" class="submit2">
  </form>
</body>

</html>

css :

 submit1 {
  background-color: #008CBA;
  color: white;
  text-align: center;
  display: inline;
  font-size: 18px;
  border: none;
}

.submit2 {
  background-color: #BA002D;
  color: white;
  text-align: center;
  display: inline;
  font-size: 18px;
  border: none;
}

.form1{
  display:inline;
}

in other scenarios i recommend using flexbox , it's making positioning much more easy .

Tried yours and it works too thanks! – Kinja Jan 22 '21 at 19:33 — Kinja, Jan 22 '21 at 19:33

Make two Form buttons side-by-side

4 Answers4