Question

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <form method="post" action="update.php">
        <input type="submit" name="submit" value="Update"/>
      </form>

      <button>Delete</button>
    </td>
  </tr>
</table>

我想在表格的同一行创建更新按钮和删除按钮。
但是，从上面的代码中，更新按钮位于顶部，删除按钮位于底部。
我应该如何让它们在桌子上平行？

Answer 1

您确定要在表单之外的按钮吗？无论如何，只需在元素上添加display: inline;即可将它们带到同一行。

＆＃13;

<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<form method="post" action="update.php" style="display:inline">
<input type="submit" name="submit" value="Update"/>
</form>
<button style="display:inline">Delete</button>
</td>
</tr>
</table>

＆＃13;

Answer 2

如果您的删除按钮＆＃39;是表单的一部分，让它在表单标签内，如下所示：

＆＃13;

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <form method="post" action="update.php">
        <input type="submit" name="submit" value="Update"/>
        <input type="button" name="button" value="Delete"/>
      </form>
    </td>
  </tr>
</table>

＆＃13;

Answer 3

使用display:inline的答案完全有效。另一种方法是使用float:left

<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<form method="post" action="update.php" >
<input type="submit" name="submit" value="Update" style="float:left" />
</form>
<button style="margin-left:10px;" >Delete</button>
</td>
</tr>
</table>

HTML - 如何在表格中的同一行上制作2个按钮

3 个答案: