Html Input with display:block 不是块，为什么不是？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1030793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input with display:block is not a block, why not?
提问by SpliFF
Why does display:block;width:auto;on my text input not behave like a div and fill the container width?
为什么display:block;width:auto;我的文本输入不像 div 那样填充容器宽度？
I was under the impression that a div is simply a block element with auto width. In the following code shouldn't the div and the input have identical dimensions?
我的印象是 div 只是一个具有自动宽度的块元素。在下面的代码中，div 和输入不应该具有相同的尺寸吗？
How do I get the input to fill the width? 100% width won't work, because the input has padding and a border (causing a final width of 1 pixel + 5 pixels + 100% + 5 pixels + 1 pixels). Fixed widths aren't an option, and I'm looking for something more flexible.
如何获取输入以填充宽度？100% 宽度不起作用，因为输入有填充和边框（导致最终宽度为 1 像素 + 5 像素 + 100% + 5 像素 + 1 像素）。固定宽度不是一种选择，我正在寻找更灵活的东西。
I'd prefer a direct answer to a workaround. This seems like a CSS quirk and understanding it may be useful later.
我更喜欢直接回答解决方法。这似乎是一个 CSS 怪癖，以后理解它可能会有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>
I should point out I can already do this with wrapper workarounds. Apart from this screwing with the page semantics and CSS selector relationships I'm trying to understand the nature of the problem and whether it can be overcome by changing the nature of the INPUT itself.
我应该指出我已经可以使用包装器解决方法来做到这一点。除了这种与页面语义和 CSS 选择器关系的混乱之外，我还试图了解问题的性质以及是否可以通过改变 INPUT 本身的性质来克服它。
Ok, this is TRULY strange! I've found that the solution is to simply add max-width:100%to an input with width:100%;padding:5px;. However this raises even more questions (which I'll ask in a separate question), but it seems that width uses the normal CSS box model and max-width uses the Internet Explorer border-box model. How very odd.
好吧，这真的很奇怪！我发现，解决办法是简单地添加max-width:100%到与输入width:100%;padding:5px;。然而，这引发了更多问题（我将在一个单独的问题中提出），但似乎 width 使用普通 CSS 框模型，而 max-width 使用 Internet Explorer 边框框模型。多么奇怪。
Ok, that last one appears to be a bug in Firefox 3. Internet Explorer 8 and Safari 4 limit the max-width to 100% + padding + border which is what the spec says to do. Finally, Internet Explorer got something right.
好的，最后一个似乎是 Firefox 3 中的错误。Internet Explorer 8 和 Safari 4 将最大宽度限制为 100% + 填充 + 边框，这是规范所说的。最后，Internet Explorer 做对了。
Oh my god, this is awesome! In the process of playing with this, and with much help from the venerable gurus Dean Edwardsand Erik Arvidsson, I managed to piece together three separate solutions to make a true cross-browser 100% width on elements with arbitrary padding and borders. See answer below. This solution does not require any extra HTML markup, just a class (or selector) and an optional behaviour for legacy Internet Explorer.
天哪，这太棒了！在玩这个的过程中，在可敬的大师Dean Edwards和Erik Arvidsson 的大力帮助下，我设法将三个单独的解决方案拼凑在一起，以在具有任意填充和边框的元素上制作真正的跨浏览器 100% 宽度。请参阅下面的答案。此解决方案不需要任何额外的 HTML 标记，只需要一个类（或选择器）和旧 Internet Explorer 的可选行为。
采纳答案by SpliFF
Check out what I came up with, a solution using the relatively unknown box-sizing:border-boxstyle from CSS 3. This allows a 'true' 100% width on any element regardless of that elements' padding and/or borders.
看看我想出了什么，一个使用box-sizing:border-boxCSS 3 中相对未知的样式的解决方案。这允许任何元素的“真实”100% 宽度，而不管这些元素的填充和/或边框。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Cross-browser CSS box-sizing:border-box</title>
<style type="text/css">
form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}
/* The voodoo starts here */
.bb {
box-sizing: border-box; /* CSS 3 rec */
-moz-box-sizing: border-box; /* Firefox 2 */
-ms-box-sizing: border-box; /* Internet Explorer 8 */
-webkit-box-sizing: border-box; /* Safari 3 */
-khtml-box-sizing: border-box; /* Konqueror */
}
</style>
<!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
<!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
</head>
<body>
<form name="foo" action="#">
<div class="bb">div</div>
<input class="bb" size="20" name="bar" value="field">
</form>
</body>
</html>
This solution supports Internet Explorer 6 and Internet Explorer 7 via a behaviour written by Erik Arvidsson with some tweaks from Dean Edwards to support percentage and other non-pixel widths.
此解决方案通过 Erik Arvidsson 编写的行为支持 Internet Explorer 6 和 Internet Explorer 7，并由 Dean Edwards 进行了一些调整，以支持百分比和其他非像素宽度。
回答by MatrixFrog
The reason this happens is that a text input's size is determined by its size attribute. add size="50" inside the <input> tag. Then change it to size="100" -- see what I mean?
发生这种情况的原因是文本输入的大小由其大小属性决定。在 <input> 标签内添加 size="50"。然后将其更改为 size="100" -- 明白我的意思了吗？
I suspect there's a better solution, but the only one that comes to mind is something I found on the "Hidden features of HTML" question on SO: Use a content-editable div, instead of an input. Passing the user input to the enclosing form (if that's what you need to) might be a little tricky.
我怀疑有更好的解决方案，但唯一想到的是我在 SO 上的“HTML 的隐藏功能”问题中找到的解决方案：使用内容可编辑的 div，而不是输入。将用户输入传递到封闭表单（如果您需要这样做）可能有点棘手。
回答by Jonathan Fingland
Your best bet is to wrap the input in a div with your border, margins, etc., and have the input inside with width 100% and no border, no margins, etc.
最好的办法是将输入用边框、边距等包裹在 div 中，并将输入放在里面，宽度为 100%，没有边框，没有边距等。
For example,
例如，
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div {
border: 1px solid red;
padding: 5px;
}
input, form {
display: block;
width: 100%;
}
</style>
</head>
<body>
<form>
<div><input type="text" name="foo" /></div>
</form>
</body>
</html>
回答by John Porter
Add this to your style:
将此添加到您的样式中：
box-sizing: border-box;
回答by Jacob
You could fake it, like this:
你可以伪造它，像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, #inputWrapper {
border: 1px solid red;
}
#topDiv {
padding: 5px;
height: 5px;
}
form {
display: block;
}
#inputWrapper {
overflow: hidden;
height: 15px;
}
input {
display: block;
width: 100%;
border-style: none;
padding-left: 5px;
padding-right: 5px;
height: 15px;
}
</style>
</head>
<body>
<div id="topDiv"></div>
<form>
<div id="inputWrapper">
<input type="text" name="foo" />
</div>
</form>
</body>
</html>
回答by AlexC
Also you could fake it, like this:
你也可以伪造它，像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
.container {
width:90%;
}
.container div{
border: 1px solid red;
padding: 5px;
font-size:12px;
width:100%;
}
input{
width:100%;
border: 1px solid red;
font-size:12px;
padding: 5px;
}
form {
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="container">
<div>
asdasd
</div>
<form action="">
<input type="text" name="foo" />
</form>
</div>
</body>
</html>
回答by Mike
Try this:
尝试这个：
form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
