如何消除TD内输入框右侧的间隙

如何解决如何消除TD内输入框右侧的间隙

|| 考虑以下简单的HTML：

<html>
<body>
<!-- Table for reference purposes -->
<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tr>
        <td>100px</td>
        <td>100px</td>
    </tr>
</table>
<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tr>
        <td><input style=\"width:100px\"/></td>
        <td>100px</td>
    </tr>
</table>
</body>
</html>

顶部的表格仅供参考，因此您可以看到我的期望。在底部的表格中，输入右边有一个很大的间隙。为什么在这里，如何在不减小输入大小的情况下摆脱它？谢谢，史提芬你们中的某些人回答说我应该设置TD的宽度，所以我已经做到了，但是两个表仍然没有对齐。如何解决此问题而又不减小输入的大小？（我不要输入右边的空格）

<html>
<body>
<!-- Table for reference purposes -->
<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tr>
        <td style=\"width:100px\">100px</td>
        <td style=\"width:100px\">100px</td>
    </tr>
</table>
<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tr>
        <td style=\"width:100px\"><input style=\"width:90px\"/></td>
        <td style=\"width:100px\">100px</td>
    </tr>
</table>
</body>
</html>

我已将此示例临时上传到http://losthobbit.net/temp/testx.html，因此您可以确切地看到我在说什么。

解决方法

问题在于ѭ2元素具有额外的填充，边框和边距，使其比您应说的要宽。您可以删除多余的东西，以使输入与表格单元格齐平，或者减小输入的宽度。 ,我能够在第二张表中将其与以下HTML对齐：

<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tbody><tr>
        <td><input style=\"width:97px;margin:0 !important;padding:0; float: left;\"></td>
        <td style=\"width:100px\">100px</td>
    </tr>
</tbody></table>

,为什么不 <td><input style=\"width:90px\"/></td> 要么 <td><input size=\"11\"></td> ,在表格的第一个<td>上设置宽度。

<td style=\"width:100px;\">

,由于您已为表格指定了固定宽度，因此我认为第一个表格单元格将尝试占用最大空间。如果您必须指定表格宽度，则也要为单元格指定宽度。这样就不会出现空格 ,我找到了解决问题的方法：减小TD的大小，使表格保持相同的宽度，例如：

<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tr>
        <td style=\"width:97px\"><input style=\"width:90px\"/></td>
        <td style=\"width:97px\">100px</td>
    </tr>
</table>

<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
    <tr>
        <td>100px</td>
        <td>100px</td>
    </tr>
</table>
<table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 200px\">
<col span=\"2\" width=\"100px\">
    <tr>
        <td><input style=\"width:95%\"></td>
        <td>100px</td>
    </tr>
</table>

使用<col>设置宽度，然后将输入宽度减小到较小的百分比，以便为其边框留出空间，并且填充使两个表对我对齐

如何消除TD内输入框右侧的间隙

如何解决如何消除TD内输入框右侧的间隙

解决方法

相关推荐