css - div 表浮动

Question

我有这样的 div 标签，里面有 3 个表。

<div>
    <table>
        <tr><td>ABC</td><td>ABC</td></tr>
    </table>


    <table>
        <tr><td>XYZ</td><td>XYZ</td></tr>
    </table>

     <table>
        <tr><td>LMN</td><td>LMN</td></tr>
    </table>

</div>

输出是


ABC ABC
XYZ XYZ
LMN LMN


我怎样才能变成这样的东西？

ABC ABC         XYZ XYZ       LMN LMN

Answer 1

默认情况下它们是块级的，使它们内联。

• https://developer.mozilla.org/en-US/docs/CSS/display
• http://jsfiddle.net/3W8bb/

例子

table {
  display: inline-block;
  /** this works too */
  display: inline-table
}​

您也可以按照@j08691 的建议让它们浮动

table { float: left }

Answer 2

您可以将表格向左浮动并在其右侧设置边距，就像这个jsFiddle 示例

​table{
    float:left;
    margin-right:80px;
}