CSS-输入宽度为100％时重叠div [英] CSS - Input at 100% width overlaps div

问题描述

我正在尝试在带有填充的div内修复带有填充，边框的常规输入框.但是，我希望输入的宽度为100％，但是如您所见，它会重叠.我该如何解决?

I am trying to fix a regular input box with padding, border, inside a div with padding. However, I want the input to have its width to be 100% but as you can see, it overlaps. How do I fix this?

CSS

#one {
    background:red;
    width:300px;
    padding:5px;
}
#two {
    width:100%;
    border:3px solid blue;
    padding:4px;
}

HTML

<div id="one"><input type="text" value="Test" id="two" /></div>​

推荐答案

在 input 样式中添加 box-sizing:border-box .否则，宽度为 100％，加上边框和填充.

Add box-sizing: border-box to the input styles. Otherwise, the width is 100%, PLUS the border and padding.

这篇关于CSS-输入宽度为100％时重叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！