html复选框输入大小错误

Question

Current display 我在 asp.net 网站上工作，我需要同时输入文本和复选框。我目前的解决方案如下:

<form method="post" style="width:100%">
    <table style="padding:5px; width:100%">
        <tr>
            <td style="white-space:nowrap; width:1%">Printer name:</td>
            <td><input type="text" name="PrinterName" value="@Request["PrinterName"]" style="max-width:100%; width:100%" /></td>
        </tr>
        <tr>
            <td style="white-space:nowrap">Model:</td>
            <td><input type="text" name="Model" value="@Request["Model"]" style="max-width:100%; width:100%" /></td>
        </tr>
        <tr>
            <td style="white-space:nowrap">Location:</td>
            <td><input type="text" name="Location" value="@Request[" Location"]" style="max-width:100%; width:100%" /></td>
        </tr>
        <tr>
            <td style="white-space:nowrap">IP:</td>
            <td>
                <table style="margin:0px; padding:0px">
                    <tr>
                        <td style="padding:0px"><input type="text" name="IP" value="@Request["IP"]" style="max-width:100%; width:100%" /></td>
                        <td style="white-space:nowrap;width:1%">
                            <div><input style="margin:0px; padding:0px" type="checkbox" />QuickIP</div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="white-space:nowrap">MAC(XX-XX-XX-XX-XX-XX):</td>
            <td><input type="text" name="MAC" value="@Request["MAC"]" style="max-width:100%; width:100%" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Submit" class="Sumbit" style="max-width:100%; width:100%" /></td>
        </tr>
    </table>
</form>

复选框未报告正确的大小(IE 和 Chrome)，文本也未保留在空格内。

目的是让文本直接位于复选框旁边，并且在文本输入的右侧尽可能小。如果没有这个奇怪的错误，我将如何实现这一目标？

编辑:在我的测试中，我切换了文本框和按钮，并在复选框的样式中添加了一个高度，这些现在已经更正了

Edit2:添加了一张现在显示的图片

Answer 1

看来你只需要从

中删除height: 1%

<td style="white-space:nowrap;width:1%">
  <!-- remove the height from the style below -->
  <div><input style="margin:0px; padding:0px; height:1%" type="checkbox" />QuickIP</div>
</td>

这将呈现“QuickIP”文本旁边的复选框

看看this codepen .