输入与显示: 块不是块，为什么不呢？

为什么 display:block;width:auto;对我的文本输入不像一个 div 和填充容器宽度？

在我的印象中，div 只是一个具有自动宽度的块元素。在下面的代码中，div 和输入不应该具有相同的尺寸吗？

如何获得填充宽度的输入？100% 的宽度不起作用，因为输入有填充和边框(导致最终宽度为1个像素 + 5个像素 + 100% + 5个像素 + 1个像素)。固定宽度不是一个选项，我正在寻找更灵活的东西。

我更喜欢直接回答这个问题。这看起来像是一个 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>

我应该指出，我已经可以使用包装工具来实现这一点。除了这种对页面语义和 CSS 选择器关系的破坏之外，我还试图了解问题的本质，以及是否可以通过改变 INPUT 本身的本质来克服这个问题。

好吧，这真的很奇怪！我发现解决方案是简单地将 max-width:100%添加到 width:100%;padding:5px;的输入中。然而，这引发了更多的问题(我将在另一个问题中提出这个问题) ，但似乎 width 使用的是普通的 CSS 框模型，max-width 使用的是 Internet Explorer 边框模型。真奇怪。

好的，最后一个似乎是 Firefox 3中的一个 bug。Internet Explorer 8和 Safari 4将最大宽度限制在100% + 填充 + 边框，这是规范要求的。Internet Explorer 终于做对了一件事。

天啊，太棒了！在处理这个问题的过程中，并且在著名大师 爱德华兹院长和 Erik Arvidsson的大力帮助下，我成功地将三个独立的解决方案组合在一起，在任意填充和边框的元素上创建一个真正的跨浏览器100% 宽度的解决方案。请看下面的答案。这个解决方案不需要任何额外的 HTML 标记，只需要一个类(或选择器)和遗留 Internet Explorer 的可选行为。

80268 次浏览
小开

您最好的选择是将输入包装在一个带边框、边距等的 div 中，并将输入放在宽度为100% 且没有边框、没有边距等的 div 中。

比如说,

<!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>
小开

发生这种情况的原因是文本输入的大小由其 size 属性决定。在 < input > 标记中添加 size = “50”。然后改为 size = “100”——明白我的意思吗？

我怀疑有一个更好的解决方案，但是我想到的唯一一个解决方案是关于“隐藏的 HTML 特性”的问题: 使用内容可编辑的 div，而不是输入。将用户输入传递到封闭的表单(如果需要的话)可能有点棘手。

HTML 的隐藏特性

小开

你可以假装，像这样:

<!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>
小开

你也可以假装，像这样:

<!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>
小开

试试这个:

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
小开
最佳答案

看看我想出了什么，一个解决方案使用相对未知的 box-sizing:border-box风格从 CSS 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>

该解决方案通过 Erik Arvidsson 编写的行为支持 Internet Explorer 6和 Internet Explorer 7，并借助 Dean Edwards 的一些调整来支持百分比和其他非像素宽度。

举个例子
行为(boxsizing.htc)

小开

把这个加入你的风格:

box-sizing: border-box;

提交答案