HTML输入元素宽于包含Div

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

基本示例代码：

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

该控件的绘制比这要复杂得多，但仍然在控制被剥离下来到这个水平，我在文本框伸出过去的问题包含div。

来源

2009-10-27 BrandonS

而且什么问题或问题？ – 2009-10-27 20:42:29

什么浏览器/版本？ – 2009-10-27 20:43:33

好的，所以问题是为什么我的文本框元素延伸出它的父div？我发现它似乎与我的DOCTYPE有关。我们需要使用 <！DOCTYPE HTML PUBLIC！ “ - // W3C // DTD HTML 4.01 // EN” “http://www.w3.org/TR/html4/strict.dtd”> 使用我的帖子中的代码，如果我将它插入HTML页面而不给它一个DOCTYPE，它可以正常工作。因此，为了重现我的问题，您必须使用严格的4.01 DOCTYPE，然后使用开发人员工具检查DIV和TextBox的大小或在DIV上设置边框。 – BrandonS 2009-10-27 21:22:32

而不直接应用该样式输入元素上，也许抽象的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中？我不会感到惊讶，如果只有更好的布局，你可以建立，这将避免需要做到这一点...

来源

2009-10-27 20:49:54

我认为html被简化为示范性的，我不认为* - 但我可能是错的 - 这是他的实际使用案例。 – 2009-10-27 20:51:58

我刚刚试过这个apporach，它似乎在IE 8和FF 3.5中工作 – 2009-10-27 20:52:17

好吧，我总是这样从字面上接受这样的要求，我的愚蠢机器人机器人大脑没有模糊的解释开关：P – 2009-10-27 20:53:16

我假设你想包含的元素（<input>）小于，或完全包含在内，<div>？

您可以：

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

一个HTML元素的宽度（我认为）作为定义的宽度+边框+保证金+填充

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

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

你可以，当然，使用

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

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

来源

2009-10-27 20:50:59

这很有趣。我将不得不更多地玩这个想法。我们以这种方式创建其他Web控件，并且我没有使用“select”元素的这个问题（可能它没有内置填充或边距，除了它的边框，所以它没有太多问题 – BrandonS 2009-10-27 21:41:13

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

最好的办法是改变文本框的边框或在格兰文本框，并说2px的与一个margin-top: -2px和margin-left:-2px（我在边框的宽度猜测）填充容器之间的另一个DIV扔

来源

2009-10-27 20:56:24

+ 1：通过我的答案的一半，你也打败了我（它真的需要代表） – KyleFarris 2009-10-27 20:58:47

你可以使用box-sizing：边框来处理这个问题，这意味着输入框的边框实际上在宽度内输入，而不是在外面添加保罗爱尔兰做比我更好的解释它：http://paulirish.com/2012/box-sizing-border-box-ftw/ – heedfull 2013-02-05 06:52:47

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

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

来源

2012-08-06 05:35:58 Gael

您可以使用盒大小：边界框照顾这个。只要把你的CSS文件中的以下内容：

input{box-sizing:border-box}

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

保罗爱尔兰有真正的好文章，解释这个技术http://paulirish.com/2012/box-sizing-border-box-ftw

他使有关填充这些点也适用于边境。

甚至还有一个罗盘mixin，使其更容易支持旧浏览器。（http://compass-style.org/reference/compass/css3/box_sizing/）

来源

2013-02-05 06:58:05 heedfull

好后@heedfull，但我根据你链接到的第一篇文章，应该输入{box-sizing：border-box}，而不是边框。 – Bill 2013-05-23 14:34:36

好点子@Bill。editted the typo。谢谢 – heedfull 2015-02-18 14:59:12

这使我的工作：

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

来源

2016-09-02 13:41:30 Raphayol

HTML输入元素宽于包含Div

回答

相关问题