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

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

工作 fiddle : 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;
}