在div下方对齐锚标签

Question

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

我的表结构如下：

<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：，left：！，但是无法获得所需的输出

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%;
}

看到这个小提琴

Answer 2

您将不得不将表声明为块元素（而不是内联块），并浮动detail 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

您可以尝试一下（ 示例 ）

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

或者， 这个 （使用wrapper div作为链接）

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

或者， 这个 （使用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/