表格数据中的 HTML5 中间对齐答案

【问题标题】：HTML5 middle align in table data表格数据中的 HTML5 中间对齐
【发布时间】：2014-02-21 03:20:30
【问题描述】：

我有一张大桌子，这是那张桌子的最后一行：

<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 并尝试使用底部、左侧、显示、浮动等命令来移动它们，但没有结果。

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

我该怎么办？

【问题讨论】：

我认为表单是块级元素，您是否尝试将它们设置为内联块
你试过<td valign="middle">吗？
Klors 应该将其添加为答案，请参阅jsfiddle.net/5P9NE 它应该足够了（内联也可以）
见这里jsfiddle.net/Lrp4A
@Drewness 放置内联样式通常是一种不好的做法。最好在样式表上这样做。

标签： css html

【解决方案1】：

[编辑] 这是一个 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>

样式最好作为样式表的一部分完成，但为了简单起见，在此处添加为样式属性。

【讨论】：

谢谢！额外问：如何在这些按钮之间添加间距？我只是不能在 CSS 中为我的表单添加边距，因为它会影响我所有的表单 obv。
最好的办法是给表单一个类属性，使它们更容易设置样式，例如。 class="inlineform" 然后根据类设置它们的样式，这样它就不会影响您的所有表单，例如。 form.inlineform { margin: ... }.

【解决方案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>

让我知道它是否有效（或无效）:)

【讨论】：

【解决方案3】：

只需将表单标签与 last-child td 中的 display:inline-block 对齐

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

【讨论】：