HTML 按钮组更改为表格，水平变为垂直

Question

我正在向外部页面提交 $obj['_id'] 值，所以我希望没有比创建如下表单更简单的方法了，否则我出丑了。

在 PHP 代码中，我更改了这个：

echo '<td><div class="btn-group" role="group" aria-label="...">
     <a class="btn btn-success btn-xs" href="modify.php" role="button">Edit</a>
     <a class="btn btn-danger btn-xs" href="del.php" role="button">Del</a></div></td>';

进入这个：

echo '<td><form name="editform" action="edit.php" method="post">
     <input type="hidden" name="editthisid" value="' . $obj['_id'] . '">    
     <input type="submit" class="btn btn-success btn-xs" name="edit" value="Edit">
     </form>
     <form name="deleteform" action="del.php" method="post">
     <input type="hidden" name="deletethisid" value="' . $obj['_id'] . '">    
     <input type="submit" class="btn btn-danger btn-xs" name="" value="Del">       
     </form></td>';

对于第一个代码，按钮是水平显示的，而对于第二个代码，提交按钮是垂直显示的。网页的宽度无关紧要，而我尝试调整 table 布局但未能水平放置按钮。

我正在寻找一个 class 来收集像 btn-group 这样的组中的表单，以便它们水平显示以在网页布局上保存 space。

有没有像 btn-group 这样的 class 分组形式？或者这无论如何都无济于事？如果是这样，是否有任何其他选项可以轻松地将它们并排放置？

编辑：我什至还没有创建任何 CSS 布局。

Answer 1

默认情况下，锚标记是内联元素。因此，如果没有样式，多个 <a> 标签将水平呈现。然而，表单标签默认为块级元素。所以你的多个 <form> 标签垂直堆叠。

我会避免使用 <table> 和相关联的 <tr> 或 <td> 标签进行布局，除非您实际渲染数据 table.

您几乎肯定想在这里使用 CSS 来控制您的布局。尝试在 <form> 标签中添加 class 以将它们显示为行内块元素，例如：

<style type="text/css">
    .inline {
        display: inline-block;
    }
</style>

<form class="inline">
    <input type="submit" class="btn btn-success btn-xs" name="edit" value="Edit">
</form>

<form class="inline">
    <input type="submit" class="btn btn-danger btn-xs" name="" value="Del">       
</form>

更新：

啊，如果您实际上是在呈现 table，那么您应该能够在同一行的 table 单元格中呈现表单。默认情况下，这将水平呈现按钮：

<table>
  <tr>
    <td><form><input type="submit" value="Edit"></form></td>
    <td><form><input type="submit" value="Del"></form></td>
  </tr>
</table>

我怀疑，如果在上面的第二个示例中您没有看到水平呈现的提交按钮，那是因为您没有正确地将 <td> 元素嵌套在相同的 <tr> 和父 <table> 标签。

HTML 按钮组更改为表格，水平变为垂直

HTML button group changed to forms, horizontal became vertical

html

php

layout

alignment

vertical-alignment