html 表单中的文本框超出表单边界

Question

我正在 HTML 中制作一个包含两个文本框和一个文本区域的表单，我希望所有三个元素共享一个公共宽度值。但是，如果我使用 width: 100%，指的是表单宽度的 100%，文本框会延伸到表单的右边框之外。（图中红色边框link表示表格边框）

图片：

正如您在上图中看到的，文本框超出了表单的右边框，大约是表单填充的一半。有没有办法使文本框正确显示（在表单周围有正确的填充）？

此外，仔细观察会发现 <textarea> 框的宽度略小于其他框（约 2px）；但是，它被设置为相同的宽度 (100%)。知道是什么原因造成的吗？

这是我的代码：

CSS:

form
{
    width: 600px;
    margin: 0px auto;
    padding: 15px;
    border: 1px dashed red;
}

input[type=text], input[type=email], textarea
{
    display: block;
    padding: 10px;
    font-size: x-large;
}

input[type=text], input[type=email]
{
    width: 100%;
    margin-bottom: 15px;
}

textarea
{
    width: 100%;
}

HTML:

<form id="frmContact">
    <input type="text" id="txtName" name="txtName" placeholder="Name *">
    <input type="email" id="txtEmail" name="txtEmail" placeholder="Email *">
    <textarea id="txtComments" name="txtComments" placeholder="Comments *"
                  maxlength="500"></textarea>
</form>

谢谢！

Answer 1

默认情况下，元素的 padding 不包含在其 width/height 维度中。在您的示例中，元素延伸到父元素之外，因为元素的每一侧都有 10px 填充。

100% + 20px != 100%

您可以将 box-sizing: border-box 添加到元素，以便在元素的 width/height 计算中包含 padding。

Updated Exmaple

input[type=text], input[type=email], textarea {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    font-size: x-large;
}

html 表单中的文本框超出表单边界

text boxes in html form going beyond borders of form

html

css

forms

textbox

border