Question

为什么输入元素不会在将其显示更改为阻止后自动占用其容器宽度的100％？还有其他因素对此有影响吗？谢谢。演示见下文：

一些解释： 1.我故意将宽度：100％注释掉，因为块级元素应该占据其容器宽度的100％。

＆＃13;

#container {
  width: 300px;
  margin: auto;
  background-color: red;
}

input[type="text"] {
  display: block;
  opacity:0.5;
  /*width:100%;*/
}

＆＃13;

<body>
  <section>
    <div id="container">
      <input type="text">
    </div>
  </section>
</body>

＆＃13;

Answer 1

我不是专家，但我很确定，因为你已经注释掉宽度：100％。尝试退出，然后它应该工作

＆＃13;

#container {
  width: 300px;
  margin: auto;
  background-color: red;
}

input[type="text"] {
  display: block;
  opacity:0.5;
  width:100%;
}

＆＃13;

Answer 2

立即更改了代码检查

#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>

Answer 3

默认情况下，输入元素在Google Chrome中有border: 2px和padding: 1px 0

当你实际应用宽度为100％时，输入的宽度实际上大于覆盖它的实际div

输入宽度（设置为div的宽度）+ border + padding＆gt; div的宽度

如果您在代码中取消注释width:100%，则右侧会有一个小小的白色区域。白色区域实际上是输入。如果您将边框设置为零，那真的足以解决问题

＆＃13;

#container {
  width: 300px;
  margin: auto;
  background-color: red;
}

input[type="text"] {
  display: block;
  opacity: 0.5;
  width: 100%;
  border: 0
}

＆＃13;

<body>
  <section>
    <div id="container">
      <input type="text">
    </div>
  </section>
</body>

＆＃13;

Answer 4

输入的默认大小为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;
}

如果你想要做出回应，最好为所有元素添加box-sizing：

* 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

输入元素，显示bock

4 个答案: