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

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;
}

这适用于大多数浏览器。

Answer 2

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

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

恕我直言，这导致了更容易理解的行为。例如，宽度“100％”则表示100％，包括边框，边距和填充。您可以在此处详细了解：http://paulirish.com/2012/box-sizing-border-box-ftw/

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

输入字段比其包含的表格单元格（HTML）更长

2 个答案: