Question

在following HTML/CSS example中，文本框超出div的边框。虽然输入为display:block且宽度为100％，但我希望文本框保留在div。

为什么它不会留在父容器中？如何修复它以使其响应并保持在父边界？

<div class="first">
  <input type="text" value="not working" />
</div>

<br/>
<br/>
<div class="sec">
  <input type="text" value="not working" />
</div>

<br/>
<div class="second">
  <span class="second-wrap">
    expected layout with text box
  </div>
</div>

div.first{
  width:50%;
  border:3px solid black;
}

div.first input{
  display:block;
  padding:20px;
  border:3px solid blue;
}

.sec{
  width:50%;
  border:3px solid black;
}

.sec input{
  display:block;
  width:100%;
  padding:20px;
  border:3px solid blue;
}

div.second{
  border:3px solid red;
  width:50%;
}
.second-wrap{
  border:3px solid blue;
  display:block;
  padding:20px;
}

Answer 1

如果您执行不设置box-sizing: border-box，则会将边框和填充添加到整个宽度。

在输入CSS上使用这些更改

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;

请参阅this codepen

Answer 2

对于输入文本，您已指定100％宽度+ 20px填充+ 3px边框。所以它正在扩展父div区域。

您可以使用calc函数正确应用文本框的宽度。像下面一样更新你的CSS。

.sec input{
  display:block;
  width:calc(100% - 46px); /*20px left+20px right+3px border left+3px border right*/
  padding:20px;
  border:3px solid blue;
}

Answer 3

我已将您的codepen更新为：

http://codepen.io/anon/pen/czHwG

.sec input{
  display:block;
  width:100%;
  padding:20px;
  border:3px solid blue;
 + height:100%;
 + box-sizing:border-box; 
}

Answer 4

您应该设置box-sizing属性以匹配您心目中的盒子模型：

.sec input{
  ...
  box-sizing: border-box;
}

Answer 5

将box-sizing: border-box;添加到输入css

Answer 6

div.first,
div.sec,
div.second{
    width:50%;
    border:3px solid #ddd;
    margin:2px auto;
    background-color:#fff;
}

 div.first input,
 div.sec input,
 div.second span{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: #777777;
    display: block;
    padding: 10px;
    width: 100%;
  }
</style>

   <body>
      <div class="first">
         <input type="text" value="not working" />
      </div>

  <div class="sec">
    <input type="text" value="not working" />
  </div>

  <div class="second">
    <span class="second-wrap">
         expected layout with text box
     </span>
  </div>
 </body>

如何在父div中包含文本框

6 个答案: