CODEWITHSUNDEEP
htmlcssforms
Allen Dela Cruz
Allen Dela Cruz

Reputation: 27

how to place my two buttons in html side by side

I am working on my HTML file. I have a table which contains four actuators. And these actuators have two buttons which are ON and OFF. How do I place the ON and OFF buttons side by side per actuator so that it will not look dull with its spacing per button?

Here's my code:

<FORM>
    
    <table width='100%'>
    <tr align='center'><td>
    <div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
    
    </FORM>
    <center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
    <font face="Arial" size="3">
    <form action="" method="POST" name="form">
    <p class="title"> WATER PUMP </p>
    <p class="form">
    <input type="submit" id="on" value="ON">
    <input type="hidden" name="ctl" value="1">
    </form></p>
    
    <form action="" method="POST" name="form">
    <p class="lol">
    <input type="submit" id="off" value="OFF">
    <input type="hidden" name="ctl" value="0">
    </form>
    </p></font>

Thank you so much in advance!

Upvotes: 1

Views: 3640

Answers (4)

Mohit Yadav
Mohit Yadav

Reputation: 471

Use display:flex;

.form{
display:flex;
}

Upvotes: 0

Anonymous
Anonymous

Reputation: 1990

try something like this:

   
    
    <table width='100%'>
    <tr align='center'><td>
    <div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
    
    
    <center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
    <font face="Arial" size="3">
    <form action="" method="POST" name="form">
    <p class="title"> WATER PUMP </p>
    <p class="form">
    <input type="submit" id="on" value="ON">
    <input type="hidden" name="ctl" value="1">

    <input type="submit" id="off" value="OFF">
    <input type="hidden" name="ctl" value="0">
    </p>
    </form>

UPDATE:

form{display:inline}
<FORM>
    
    <table width='100%'>
    <tr align='center'><td>
    <div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
    
  
    <center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
    <font face="Arial" size="3">
    <form action="" method="POST" name="form">
    <p class="title"> WATER PUMP </p>

   
   
    <input type="submit" id="on" value="ON">
    <input type="hidden" name="ctl" value="1">

    </form>
    
    <form action="" method="POST" name="form">

    <input type="submit" id="off" value="OFF">

</form></font></center>

Upvotes: 1

Keerthana Prabhakaran
Keerthana Prabhakaran

Reputation: 3787

Here

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

According to HTML spec both <form> and <p> are block elements and you cannot nest them. Maybe replacing the <p> with <span> would work for you.

<FORM>

<table width='100%'>
<tr align='center'><td>
<div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>

</FORM>
<center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
<font face="Arial" size="3">
<!-- Style display inline for forms and remove paragraph between them and reorder hidden name ctl -->
<form action="" method="POST" name="form" style="display: inline;">
<p class="title"> WATER PUMP </p>

<input type="hidden" name="ctl" value="1">
<input type="submit" id="on" value="ON">
</form>

<form action="" method="POST" name="form" style="display: inline;">

<input type="submit" id="off" value="OFF">
<input type="hidden" name="ctl" value="0">
</form>
</p></font>

Upvotes: 2

James
James

Reputation: 323

You need to edit the markup a bit. You can use text-align: center or even display: inline-block but first I've tided up the HTML and CSS.

.box {
  border: 2px solid #000; 
  border-radius:30px;
  padding: 30px;
  display: block;
  margin: 0 auto;
  width:400px;
  background-color:#F4F4F4;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.title {
  text-transform: uppercase;
  color: #1717C9;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
.text {
  text-transform: uppercase;
}

form {
  text-align: center;
 }
<div class="box">

  <p class="title">
      Manual Control
  </p>

  <form action="" method="POST" name="form">
  
    <p class="text">
      Water Pump
    </p>
    
    <input type="submit" id="on" value="ON">
    <input type="hidden" name="ctl" value="1">

    <input type="submit" id="off" value="OFF">
    <input type="hidden" name="ctl" value="0">

  </form>

</div>

Upvotes: 1

Related Questions