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

Question

http://jsfiddle.net/HnnHf/1/

试图了解我做错了什么。普通表，我想要输入框均匀填充单元格。在第一行，您会看到2个输入，第二行有一个输入跨越单元格。

他们的右边不匹配。为什么？当我运行检查器时，它会显示其他像素吗？

我的部分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>

我的实时网站错位：

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

Answer 1

工作小提琴： http://jsfiddle.net/ghUEw/

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

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

然后，border-collapse属性。它确定表格边框是折叠是单个边框还是单独渲染，例如，对于相邻的表格单元格。您需要将其设置为以下以使它们折叠，因为每个表行的单元格数不同。

table {
    border-collapse: collapse;
}

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

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

如果您不想显示任何边框，请将其替换为border: none;

然后，在您的CSS中，要使标签按您希望的方式显示，您可以应用float:right;（也已更正vertical-align: middle;）

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