将锚标记对齐在div下方

Question

我有两个并排显示的表格，我有两个与这些表格相关的按钮 我希望按钮（锚标签）出现在桌子下方，而桌子并排放置

我的表格结构如下：

<div id="table">
<div id="detail-table">
<table>
...some table data...
</table>
<a href></a>
<a href></a>
</div> // detail-table close
<div id="no-detail-table">
<table>
...some table data...
</table>
<a href></a>
<a href></a>
</div> // no-detail-table close
</div> // table div close

相关CSS：

div#table{
    margin: 0;
    padding: 0;
    text-align: center;
}

table{
    display:inline-block;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

}

我希望输出像这样（见图）：我尝试了float属性和position：absolute，top： ，左：！，但无法获得所需的输出

JSFIDDLE：http://jsfiddle.net/a8THA/

Answer 1

只需将float应用于#table div并将width设置为50%：

#table{
    margin: 0;
    padding: 0;
    text-align: center;
}

#table div {
    width:50%; float:left;
}

table{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
}

请参阅此fiddle

Answer 2

您将必须将表声明为块元素（不是内联块）并浮动细节div以实现所需的效果。例如：

table { display:block; }
#detail-table { float:left; }
#no-detail-table { float:left; margin-left: 50px /* Add space between tables. Or you could float this div right (float:right;) */ }

以下是工作示例的链接：http://jsfiddle.net/86NQ7/

Answer 3

您可以尝试此操作（Example）

#table div {
    display:inline-block;
    text-align:center;
}

或者，this one（使用包装div作为链接）

#table div {
    display:inline-block;
}
#table div#links {
    text-align:center;
    display:block;
}

或者，this one（使用tfoot）

#table div {
    display:inline-block;
}

div#table table tfoot td{
    text-align:center;
}

Answer 4

你能试试吗，

     <tr>
        <td colspan="7">
            <a href="some link" class="btn btn-rounded btn-success" download="" id="download-detail-button">Download</a>
          <a class=" btn btn-rounded btn-info" target="_blank" onclick="print command" id="print-button">Print</a></td>
    </tr>

演示：http://jsfiddle.net/a8THA/2/