为什么输入元素不是在将其显示更改为block后会自动占用其容器宽度的100％？还有其他一些因素对此有影响吗？谢谢。演示见下文：input element，display bock
一些解释： 1.我注释掉宽度：100％有意因为块级元素应该占用它的容器宽度的100％。
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
/*width:100%;*/
}<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>我不是专家，但我敢肯定那是因为你已经注释掉宽度：100％。尝试decommenting是那么它应该工作
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
width:100%;
}改变了代码检查现在
#container {
width: 300px;margin: auto;
background-color: red;
}
input[type="text"] {
opacity:0.5;
width:100%;
border-width:0;
padding:0;
}<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>默认输入元件具有
border: 2px和padding: 1px 0在谷歌浏览器
当你在实际应用中的100％的宽度，输入竟然出现了宽度比实际div的外面覆盖输入的它
宽度（集到div的宽度）+ border + padding> div的宽度
右边有一个小小的白色区域，以防您在代码中取消注释width:100%。那个白色区域实际上是输入。如果您设置边界为零，这真的够解决的事情
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity: 0.5;
width: 100%;
border: 0
}<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>默认大小是20，因此，如果您的输入自动它的大小是没有定义的大小或CSS规则20. 最好的解决方案是增加宽度。如果你想成为响应
#container
{
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"]
{
display: block;
opacity:0.5;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
最好是添加盒大小，以这样的所有元素： 试试这个代码
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
注释掉风格的宽度。 – Nitheesh
给出宽度：输入元素的100％并检查。 –
使用100％，这将取得父元素的全宽，所以你的输入将是300px。提示：为你的输入字段添加一个类，不要使用“input [type =”text“]”来设置它们的样式。 – divisionkiller