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

似乎您只需要从{p>中删除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。

HTML复选框输入大小错误

1 个答案: