Html 如何在父div中包含文本框_Html_Css_Overflow

Html 如何在父div中包含文本框

html css

Html 如何在父div中包含文本框,html,css,overflow,Html,Css,Overflow,在中，文本框超出了div的边界。虽然输入的是display:block，宽度为100%，但我希望文本框保持在div中为什么它不留在父容器中？如何修复它以使其响应并保持在父边界中 <div class="first"> <input type="text" value="not working" /> </div> <br/> <br/> <div class="sec"> <input type="text

在中，文本框超出了

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;
}








预期的文本框布局
第一分区{
宽度：50%；
边框：3倍纯黑；
}
第一部分输入{
显示：块；
填充：20px；
边框：3件纯蓝；
}
秒{
宽度：50%；
边框：3倍纯黑；
}
秒输入{
显示：块；
宽度：100%；
填充：20px；
边框：3件纯蓝；
}
第二分区{
边框：3倍纯红；
宽度：50%；
}
.第二次包装{
边框：3件纯蓝；
显示：块；
填充：20px；
}

对于输入文本，您已指定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;
}

我已将您的代码笔更新为：

您应该设置属性以匹配您心目中的长方体模型：

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

如果设置了

框大小：边框框

，则将边框和填充添加到整个宽度

在输入CSS上使用这些更改

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

请参见添加框大小：边框框到输入css

div.first，
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>

副处长，
第二分区{
宽度：50%；
边框：3px实心#ddd；
保证金：2倍自动；
背景色：#fff；
}
第一部分输入，
div.sec输入，
第二节跨度{
背景：无重复滚动0 0 rgba（0,0,0,0）；
边界：0无；
颜色：#777777；
显示：块；
填充：10px；
宽度：100%；
}
预期的文本框布局

最好使用框大小值，因为a）不建议使用calc（如果不是必要的话），b）实现可能会有所不同，c）

框大小：边框框大小由浏览器决定，类似这样的问题每次都会带我回学校……：）谢谢：）@AnilNamde你可能会读到关于盒子模型的内容，谢谢@HerrSerker链接真的很有帮助
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>