HTML5中间对齐表格数据

Question

我有一张大表，这是该表的最后一行：

<tr>
  <td>
    <form action="index.jsp" method="get">
      <button type="submit" id="backButton">Back</button>
    </form> 

    <form action="deleteServlet" method="post">
      <button type="submit" name="delete" class="deleteButton"
        value="${placeholder.placeholder_id}">Delete</button>
    </form>

  </td>
</tr>

在我最后一个td中，表单内有两个按钮（这是一个很好的方法吗？）。我想要做的是中间对齐“后退”和“删除”按钮，使它们看起来不错。现在它看起来像一个曲折（见图）。我已经为这些按钮添加了id或class -tags，并尝试使用bottom，left，display，float等命令移动它们，但没有结果。

我不能制作两个td（一个按钮一个td）因为td之间有太多空间。

我该怎么办？

Answer 1

[edit]这是一个jsFiddle来演示。 [/编辑]

表单是块级元素，只需将它们转换为inline-block，它们就会很好地并排放置。

<table>
    <tr>
        <td>
            <form action="index.jsp" method="get" style="display: inline-block;">
                <button type="submit" id="backButton">Back</button>
            </form>
            <form action="deleteServlet" method="post" style="display: inline-block;">
                <button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
            </form>
        </td>
    </tr>
</table>

样式作为样式表的一部分会做得更好，但为了简单起见，这里将其添加为样式属性。

Answer 2

您可以尝试这样的事情：

<tr>
  <td style="line-height:30px;">
    <div style="height:30px; float:left;">
      <form action="index.jsp" method="get">
        <button type="submit" id="backButton">Back</button>
      </form> 
    </div>
    <div style="height:30px; float:left;">
      <form action="deleteServlet" method="post">
        <button type="submit" name="delete" class="deleteButton"
          value="${placeholder.placeholder_id}">Delete</button>
      </form>
    </div>
    <div style="clear:both;"></div>
  </td>
</tr>

让我知道它是否有效：）

Answer 3

只需将表单标记与最后一个孩子display:inline-block

中的td对齐即可

小提琴澄清：http://jsfiddle.net/HarishBoke/uHCyU/