Question

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

基本示例代码：

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

这个控件的渲染要复杂得多，但是当控件被剥离到这个级别时，我还有一个问题，即文本框突出了包含div。

Answer 1

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

input{box-sizing:border-box}

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

保罗爱尔兰人非常善于解释这项技巧http://paulirish.com/2012/box-sizing-border-box-ftw

他对填充的要点也适用于边界。

甚至还有一个指南针混合，以便更容易支持旧浏览器。（http://compass-style.org/reference/compass/css3/box_sizing/）

Answer 2

这使我找到了工作：

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

Answer 3

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

你最好的办法是更改文本框上的边框，或者在文本框和容器之间插入另一个div，其中填充为2px，margin-top: -2px和margin-left:-2px（我是猜测边界宽度）

Answer 4

我假设您希望包含的元素（<input>）小于<div>？或<{1}}

你可以：

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

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

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

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

当然，您可以使用

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

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

Answer 5

我知道这篇文章相当陈旧，但这是一个常见的问题，没有人发布任何好的答案......

以下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>

Answer 6

不是直接在输入元素上应用样式，而是将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中？如果你可以构建一个更好的布局来避免需要这样做，我不会感到惊讶......

Answer 7

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

HTML输入元素比包含Div更宽

7 个答案: