html - 如何消除TD中输入框右侧的空白

标签 html css

考虑这个简单的 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暂时,这样您就可以准确地看到我在说什么。

最佳答案

问题是 <input>元素具有额外的填充、边框和边距,使其比您所说的更宽。您可以删除多余的内容以使输入与表格单元格齐平,或者缩小输入的宽度。

关于html - 如何消除TD中输入框右侧的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6111394/

相关文章:

javascript - 如何在屏幕上保持弹出模式的同时停止导航?

html - 粘贴的 HTML 是否保证经过清理?

css - 如何在左侧打开 Primefaces 子菜单?

html - 表列调整大小

javascript - 按div内容排序(点击)

javascript - carouFredSel 复制分页项目符号

javascript - 如何在本地主机上上传 php 文件并从前端站点访问它?

javascript - React JSX 按钮的动态定位

html - Foundation 中的垂直图标栏未占据全高

css - 有没有人使用 1 个样式表使 slick grid 正常工作?