输入字段比其包含的表单元格(HTML)长

Question

尝试使用HTML格式化字段。我有以下内容：

<table style="width: 100%;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width: 65px;">
<asp:Label ID="lblKeywords" runat="server" Text="Keywords"
AssociatedControlID="txtKeywords" Font-Bold="true"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtKeywords" Width="100%" runat="server"
MaxLength="256" placeholder="Use comma to seperate keywords." />
</td>
</tr>
</table>

检查结果，文本框txtKeywords比其单元格长4个像素。

我假设这是边界的4个像素；处理这个问题的最佳方法是什么？

Answer 1

您可以使用以下CSS规则将框大小更改为"border-box"：

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}

IMHO这会导致更容易摸索的行为。例如，宽度"100%"意味着100%包括边框、边距和填充。您可以在此处阅读更多信息：http://paulirish.com/2012/box-sizing-border-box-ftw/

此外，作为附带说明，请考虑不使用表格来对齐表单字段。看看我的博客文章：http://davidtanzer.net/css_vertical_align

Answer 2

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

最简单的方法是将输入设置为使用box-sizing: border-box;

input.myClass {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

这适用于大多数浏览器。