html - 为什么 html 表格和文本框在 CSS 中具有相同的宽度，但它们却不对齐？

Question

我有一个网页表单，其中一行有一个文本框，下一行有一个表格。

在我的 CSS 中，我的宽度相同：

#myTable {
width: 745px;
border: 1px solid;   
border-collapse: collapse;

}

.fullRowTextBox {
    width: 745px;
    border: 1px solid;
}

但文本框似乎比那张桌子长一点。有什么理由不能让文本框和表格的宽度完全相同？

Answer 1

默认文本框有padding. 删除它

.fullRowTextBox {
    padding: 0;
}

在这种情况下，您的表width必须补偿border，因为默认使用表box-sizing: border-box。所以将width表格的设置为文本框的width+ 2px。

或者设置box-sizing. 有了这个你#myTable和.fullRowTextBox可以有相同的width设置。

.fullRowTextBox {
    box-sizing: border-box;
}

注意：此方法可能与旧版浏览器不兼容。你应该添加供应商前缀。