如何将我的两个按钮并排放在html中

Question

我正在处理我的HTML文件。我有一个包含四个执行器的表。这些执行器有两个按钮，分别为ON和OFF。如何将每个执行器并排放置ON和OFF按钮，使每个按钮的间距看起来不会变钝？

这是我的代码：

<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>

提前非常感谢你！

Answer 1

下面

浏览器会在每个<p>元素之前和之后自动添加一些空格（边距）。边距可以用CSS修改（带边距属性）。

根据HTML规范，<form>和<p>都是块元素，您无法嵌套它们。也许将<p>替换为<span>对您有用。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试这样的事情：

＆＃13;

＆＃13;

   
    
    <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>
    

＆＃13;

＆＃13;

＆＃13;

更新：

＆＃13;

＆＃13;

form{display:inline}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要稍微编辑标记。您可以使用text-align: center甚至display: inline-block，但首先我已经整理了HTML和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>

Answer 4

使用display:flex;

.form{
display:flex;
}