时间戳

首页 > 解决方案 > Html复选框输入大小错误

html - Html复选框输入大小错误

问题描述

当前显示 我在一个 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：添加了现在显示的图片

标签： htmlcssasp.net

解决方案

看来你只需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”文本旁边的复选框

看看这个 codepen。

推荐阅读