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

工作小提琴：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;
}