我的桌子不允许我的复选框并排放置。

时间:2016-02-14 01:49:37

标签: html css

我的页面的其余部分符合容器宽度,该宽度等于此midBodyWrapper的顶行和底行,但这些框不会并排布局。我不知道发生了什么,但我也尝试了一些内联样式,但没有任何效果。请看附图。感谢您的帮助。Should fill length

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

它也是一个响应式页面,所以我认为由于某种原因它会陷入其反应较小的压缩形式。因为这就是他们想要在移动设备上看待它的方式。

1 个答案:

答案 0 :(得分:1)

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

td div {
   display: inline-block;
}

td div {
   float: left;
}

Demo