Question

我希望#idTable和#userTable位于彼此旁边以及#idTable下面的按钮。我试过display: inline-block;，但没有帮助。此外，我试图将按钮放在div#userTable之后，但是每当该表填充更多数据时，该按钮会更多地按下按钮。我希望按钮保持静止在左侧。而#userTable及其信息在第一个表的右侧。

HTML：

<input type="date" />
<input type="date" />
<br style="clear:both" />
<table border="1" id="idTable">
    <tr>
        <th><b>#</b>

        </th>
        <th><b>ID</b>

        </th>
    </tr>
    <tr>
        <td>// #'s here</td>
        <td>// ID's here</td>
    </tr>
</table>
<br style="clear:both" />
<button>Update</button>
<div id="userTable">
    <table border="1">
        <tr>
            <td><b>ID</b>

            </td>
            <td>Name</td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="1" style="width:100%">
                    <tr>
                        <td><b>ID</b></td>
                        <td><b>Name</b></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

CSS：

#idTable{
    display:inline-block;
}

#userTable{
    display:inline-block;
}

JSFiddle Link

Answer 1

您可以将#idTable和该按钮添加到另一个div（例如#wrapper）并将其float property设置为left。

HTML：

<div id='wrapper'>
    <table border="1" id="idTable">
        <tr>
            <th><b>#</b>

            </th>
            <th><b>ID</b>

            </th>
        </tr>
        <tr>
            <td>// #'s here</td>
            <td>// ID's here</td>
        </tr>
    </table>
    <button>Update</button>
</div>

CSS：

#wrapper {
    float: left;
}

请参阅http://jsfiddle.net/82zv67d7/7

两张桌子就在彼此旁边

1 个答案: