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 example

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