比包含 Div 更宽的 HTML 输入元素答案

【问题标题】：HTML input element wider than Containing Div比包含 Div 更宽的 HTML 输入元素
【发布时间】：2010-12-10 15:36:10
【问题描述】：

我有一个包含在 div 中的 html 元素。高度由外部 div 决定，输入控件的高度和宽度为 100%。在最基本的层面上，我遇到了一个问题，即文本框超出了包含 div 的右侧。

基本示例代码：

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

这个控件的渲染远比这个复杂，但是当控件被剥离到这个级别时，我遇到了一个问题，即文本框伸出包含的 div。

【问题讨论】：

好的，所以问题是为什么我的文本框元素超出了它的父 div？我发现它似乎与我的 DOCTYPE 有关。我们需要使用 ttp://www.w3.org/TR/html4/strict.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/strict.dtd"> 使用我帖子中的代码，如果我将其插入 html 页面而不给它一个 DOCTYPE ，它工作正常。因此，为了重现我的问题，您必须使用严格的 4.01 DOCTYPE，然后使用开发工具检查 DIV 和 TextBox 的大小或在 DIV 上设置边框。
@BrandonS 您介意将我的答案标记为正确吗？
尝试了下面的大部分答案，但它们不起作用

标签： html css

【解决方案1】：

与其直接在输入元素上应用样式，不如将 CSS 抽象到一个文件中并使用类：

div.field_container
{
  height: 25px;
  width: 150px;
}

div.field_container input
{
  height: 100%;
  width: 100%;
} 

<div class="field_container">
  <input type="text" name="" value="" />
</div>

在我测试这是否有帮助之前，我已经跑出了门，但至少，如果我的解决方案没有，你可以在 DIV css 上使用最大高度/宽度设置，以使其不会中断工作。像这样抽象的 CSS 使得使用 Firefox 中的 Firebug 之类的插件更容易解决问题。

但问题是，是否需要将输入标签包含在它自己的 DIV 中？如果您可以构建一个更好的布局来避免这样做，我不会感到惊讶......

【讨论】：

【解决方案2】：

我假设您希望包含的元素 (<input>) 小于或完全包含在 <div> 中？

您可以：

input {width: 50%; /* or whatever */ }

一个 html 元素的宽度（我认为）计算为定义的宽度 + 边框 + 边距 + 填充

如果你已经将输入定义为具有父级的 100% 宽度，然后添加其他属性肯定会溢出父级 div。

您可以将边距/填充/边框设置为 0，但这可能看起来不太好。所以更容易，虽然不一定是完美的，只是使用适当较小的宽度。

你当然可以使用

#parent_div {overflow: hidden; /* or 'auto' or whatever */}

隐藏输入元素中通常会溢出容器 div 的部分。

【讨论】：

这很有趣。我将不得不更多地尝试这个想法。我们以这种方式创建其他 Web 控件，而“select”元素没有这个问题（也许除了边框之外它没有并且内置填充或边距，所以这不是什么大问题。跨度>

【解决方案3】：

不幸的是，这取决于您使用的浏览器，但设置对象（文本框）的宽度不会考虑对象边框的宽度。大多数浏览器只考虑外部对象的任何填充和包含对象的边距，但有一些（我在看你的 IE）在计算百分比时不添加边框；

您最好的选择是更改文本框的边框，或者在文本框和容器之间添加另一个 div，其填充为 2px，带有 margin-top: -2px 和 margin-left:-2px（我猜是在边框宽度）

【讨论】：

你可以使用 box-sizing:border box 来处理这个问题。这意味着输入框上的边框实际上是在输入的宽度内，而不是在外面添加。 Paul Irish 解释得比我好：paulirish.com/2012/box-sizing-border-box-ftw

【解决方案4】：

我知道这篇文章已经很老了，但这是一个常见问题，没有人发布任何好的答案...

以下 HTML 代码看起来不错。但是当我添加doctype时，问题就出现了

div.field_container
{
    height: 25px;
    width: 150px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <input type="text" name="" value="" />
</div>

要解决宽度/高度问题，您可以在 field_container 中添加填充，但这会使容器变大。

div.field_container
{
    height: 25px;
    width: 150px;
    padding-bottom: 6px;
    padding-right: 4px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <input type="text" name="" value="" />
</div>

如果你不能改变容器的宽度，你也可以使用下面的技巧，但这仍然会增加高度

div.field_container
{
    height: 25px;
    width: 150px;
    padding-bottom: 6px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>

【讨论】：

【解决方案5】：

您可以使用 box-sizing:border-box 来处理这个问题。只需将以下内容放入您的 css 文件中：

input{box-sizing:border-box}

这意味着输入框上的边框实际上是在输入宽度的内部，而不是添加到外部。这就是使输入大于容器的原因。

Paul Irish 有很好的帖子来解释这种技术http://paulirish.com/2012/box-sizing-border-box-ftw

他关于填充的观点也适用于边框。

甚至还有一个 compass mixin 可以更轻松地支持旧版浏览器。 (http://compass-style.org/reference/compass/css3/box_sizing/)

【讨论】：

如其他答案中所述，它可能需要width: 100%; height: 100%。否则，很好的答案。

【解决方案6】：

这为我完成了工作：

input {
  padding: 0.2em; 
  box-sizing: border-box;
  width: 100% 
}

【讨论】：

【解决方案7】：

尝试输入width : 100%; box-sizing: border-box;

【讨论】：

【解决方案8】：

请将以下 css 应用于您的输入元素。

{
    box-sizing: border-box;
    width: 100%;
}

如果你使用 bootstrap 或者其他 css 库，都没有问题。

【讨论】：