html - 我的 table 不允许我的复选框并排放置。

Question

我页面的其余部分符合容器宽度，容器宽度等于此 midBodyWrapper 的顶线和底线，但这些框不会并排放置。我不确定发生了什么，但我也尝试了一些内联样式，但没有任何效果。请参阅所附图片。感谢您的帮助。

 <table id="midBodyWrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody><tr>
                                <td class="subHeader" width="35%"><br>I Mainly Shop For:
                                </td>
                            </tr>
                            <tr>
                                <td class="checks2">
                                    <div>
        <table cellpadding="0" cellspacing="0">
            <tbody><tr valign="middle">
                <td></td>
                <td></td>
            </tr>
        </tbody></table>
        <input type="checkbox" name="CheckBox.A address.Men's Clothing">Men's Clothing<input type="hidden" name="CheckBox.A address.Men's Clothing" value="off">
    </div>

    <div>
        <table cellpadding="0" cellspacing="0">
            <tbody><tr valign="middle">
                <td></td>
                <td></td>
            </tr>
        </tbody></table>
       <input type="checkbox" name="CheckBox.A address.Women's Clothing">Women's Clothing<input type="hidden" name="CheckBox.A address.Women's Clothing" value="off">
    </div>

    <div>
        <table cellpadding="0" cellspacing="0">
            <tbody><tr valign="middle">
                <td></td>
                <td></td>
            </tr>
        </tbody></table>
        <input type="checkbox" name="CheckBox.A address.Boy's Clothing">Boy's Clothing<input type="hidden" name="CheckBox.A address.Boy's Clothing" value="off">
    </div>


                                </td>
                            </tr>
                        </tbody></table>


#midBodyWrapper {
    border: 1px solid #bbb;
    border-left: 0;
    border-right: 0;
    padding: 30px 0;
    margin: 40px 0;
}

它也是一个响应式页面，所以我认为出于某种原因它卡在响应式较小的压缩形式中。因为这应该是它在移动设备上的样子。

Answer 1

要在一行中显示您的元素，您需要应用以下属性:

td div {
   display: inline-block;
}

或

td div {
   float: left;
}

Demo