Html 输入字段宽度不是我设置的，未对齐。输入中的附加边框

试图理解我做错了什么。普通表格，我希望输入框均匀填充单元格。在第一行，您可以看到两个输入，第二行有一个跨单元格的输入

他们的右侧不匹配。为什么？当我运行inspector时，它会显示额外的像素吗

我的HTML的一部分：

<div style="width: 1000px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-top: 10px;">
            <table>
                <tr>
                    <td style="width: 80px;"><label>From&nbsp;</label></td>
                    <td style="width: 120px;">
                        <input type="text" class="fill-space" />
                    </td>
                    <td style="width: 80px;"><label>To&nbsp;</label></td>
                    <td style="width: 120px;">
                        <input type="text" class="fill-space" />
                    </td>
                    <td style="width: 80px;"><label>Sort by&nbsp;</label></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="6">&nbsp;</td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="3">
                        <input type="text" class="search" />
                    </td>
                    <td></td>
                    <td>
                        Refresh button
                    </td>
                </tr>
            </table>
        </div>

从…起
到
排序
刷新按钮

风格：

    td label {
        width: 100%;
        color: #F1F1F1;
        text-align: right;
        vertical-align: central;
    }

    input.fill-space {
        width: 100%;
    }

    input.search {
        width: 100%;
        background-image: url("/images/Search.png");
        background-position: right center;
        background-repeat: no-repeat;
    }
</style>

td标签{
宽度：100%；
颜色：#f1f1；
文本对齐：右对齐；
垂直对齐：中心对齐；
}
输入填充空间{
宽度：100%；
}
input.search{
宽度：100%；
背景图片：url（“/images/Search.png”）；
背景位置：右中；
背景重复：无重复；
}

我的实时站点未对齐：

---

另外，如果我设置背景，为什么要在输入中获得另一个边框？

工作小提琴：

表格元素的默认填充和边距在不同的浏览器中有所不同。 因此，最好对表元素使用CSS重置

table * {
    margin: 0;
    padding: 0;
}

然后，出现了

边框折叠

属性。它确定是将表格边框折叠为单个边框，还是单独呈现，比如相邻表格单元格。由于每个表行的单元格数不同，所以需要按如下方式设置以使其折叠

table {
    border-collapse: collapse;
}

然后，如果希望表中的输入看起来相同，则需要设置它们的边框

table input {
    border: 1px solid #aaa;
}

如果不希望显示任何边框，请将其替换为

border:none

然后，在CSS中，为了使标签以您想要的方式显示，您可以应用
float:right（也已更正
垂直对齐：中间；
）

您是否尝试过
大纲：0
或
边框：0
？另外，使用填充空间而不是“搜索”类工作得很好。那么它就没有边界了。还有一个问题，你用的是什么浏览器？
td label {
    width: 100%;
    color: #F1F1F1;
    text-align: right;
    vertical-align: middle;
    float:right;
}