将 HTML 按钮放置在表格的右下角答案

【问题标题】：Position a HTML button to bottom right of a table将 HTML 按钮放置在表格的右下角
【发布时间】：2014-04-05 13:10:09
【问题描述】：

尝试了各种解决方案，但我无法解决任何问题，而且我很难弄清楚如何定位 HTML 元素。这个应该和imo一样容易。还是……

注意：按钮不是表格的一部分。

我有一个表格，我想在表格右侧放置一个按钮，按钮底部的底部与表格底部垂直对齐。

经过编辑以提供基本布局。

<table id="someTable">
  <tr>
    <td>SomeCell</td>
  </tr>
</table>
<button id="somebutton">
  A button
</button>

【问题讨论】：

你能提供一个小提琴吗？
请提供您的代码
它几乎只是一个没有任何样式的表格和按钮，jsfiddle.net/nwWWL

标签： html css button html-table vertical-alignment

【解决方案1】：

你可以试试这个：

Updated fiddle here

<table id="someTable">
   <tr>
      <td>Some cell</td>
   </tr>
<tfoot>
   <tr>
      <td valign="bottom" align="right">
        <button id="someButton">
          A button
        </button>
      </td>
   </tr>
</tfoot>
</table>

祝你好运.....

【讨论】：

不是我想要的。 “表格右侧的按钮”。我想我应该包括一个小提琴，但直到有人问起它才知道小提琴。

【解决方案2】：

设法让它工作。

<div>
  <table id="someTable">
    <tr>
      <td>SomeCell</td>
    </tr>
  </table>
  <button id="someButton">
    A button
  </button>
</div>

#someTable
{
  display: inline-table;
}
#somebutton
{
  display: inline-block;
  vertical-align: bottom;
}

http://jsfiddle.net/Pf9Y7/

【讨论】：

你应该接受你自己的答案，因为你是唯一真正回答这个问题的人。

【解决方案3】：

<table border="1" width="250">
<tr>
    <td>Hello <br/><br/><br/></td>
    <td valign="bottom" align="right"><button type="button">Click Me!</button></td>
</tr>
</table>

【讨论】：