输入内部的填充会打破宽度100%

好的，我们知道对象设置填充会导致宽度改变，即使它是显式设置的。虽然我们可以争论这背后的逻辑，但是它会导致一些问题。

对于大多数情况，您只需要添加一个子元素，然后向该子元素添加填充，而不是将其设置为100% ，但是对于表单输入，这不是一个可能的步骤。

看看这个:

body {
font-size: 14px;
margin: 0px;
padding: 0px;
}


DIV.formfield {
clear: both;
margin: 0px;
padding: 10px;
}


DIV.formlabel {
margin-top: 20px;
padding: 5px;
font-weight: bold;
text-align: left;
}


DIV.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}


DIV.formvalue.correct {
border: 1px solid green;
}


textarea.textarea {
width: 100%;
min-height: 80px;
}


input.input {
width: 100%;
padding: 5px;
}


input.input2 {
width: 100%;
}


input.input3 {
width: 100%;
padding: 5px;
margin: -5px;
}


input.input4 {
width: 100%;
padding: 10px;
margin: -10px;
}


input.input5 {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
<div class='formfield' id='field_text'>
<div class='formlabel'>No padding</div>
<div class='formvalue'>
<textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
</div>
<div class='formlabel'>Also no padding</div>
<div class='formvalue'>
<input type='text' class='input2' name='apa' value='Or here...' />
</div>
<div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
<div class='formvalue'>
<input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
<div class='formvalue'>
<input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
</div>


<div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
<div class='formvalue'>
<input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
</div>


<div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
<div class='formvalue correct'>
<input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
</div>
</div>

第二个输入的填充设置为5px，我非常喜欢这个默认设置。但不幸的是，这使得输入在所有方向上增长10px，包括在100% 的宽度上增加10px。

这里的问题是，我不能在输入中添加一个子元素，所以我不能修复它。所以问题是:

有没有办法在保持100% 宽度的同时在输入内部添加填充？它需要是100% ，因为形式将呈现在不同的父级宽度，所以我不知道父级的宽度事先。

89899 次浏览
小开

我所知道的唯一防止这种情况发生的方法就是分配100% -10这样的值。

小开

我不知道它的跨浏览器兼容性如何(它可以在 Firefox 和 safari 中使用) ，但是你可以试试这个解决方案:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(只公布了我更改的值)

小开

也许把边框 + 背景从 input中去掉，用边框 + 背景和宽度: 100% 封装在 div中，然后在 input上设置一个边距？

小开

一种选择是将 INPUT包装在具有填充的 DIV中。

CSS:

div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}


div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}


div.paddedInput input {
border: 0px;
width: 100%;
}

HTML:

<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
小开

我对类似的东西有些疑问。我有100% 的输入和一个小填充的 tds。我所做的是补偿 td 上的填充如下:

.form td {
padding-right:8px;
}


.form input, .form textarea {
border: 1px solid black;
padding:3px;
width:100%;
}

填充8px 以包括输入/textarea 的边框和填充。 希望这个能帮上忙！

小开

我发现的一个解决方案是使用一个相对定位的父标记来绝对定位输入。

<p class="full-width-input">
<input type="text" class="text />
</p>

应用风格:

p.full-width-input {
position: relative;
height: 35px;
}


p.full-width-input input.text {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 5px;
}

唯一需要注意的是，段落标记需要一个高度设置，因为它的绝对位置子元素不会扩展它的高度。通过将 width: 100%锁定到父元素的左侧和右侧，从而避免了设置 width: 100%的需要。

小开
最佳答案

使用 CSS3，您可以使用属性 盒子大小来改变浏览器计算 输入宽度的方式。

input.input {
width: 100%;
box-sizing: border-box;
}

你可以在这里了解更多: http://css-tricks.com/box-sizing/

小开

试着用百分比来填充:

.input {


// remove border completely
border: none;


// don't forget to use the browser prefixes
box-shadow: 0 0 0 1px silver;


// Use PERCENTAGES for at least the horizontal padding
padding: 5%;


// 100% - (2 * 5%)
width: 90%;


}

如果你担心旧浏览器上的用户看不到盒子阴影，只要给输入一个微妙的背景颜色作为备份。如果你用像素做这些事情，那么你很有可能在其他地方使用它们，这可能会带来一些额外的挑战，如果你遇到它们，请让我知道。

小开

经常被遗忘的 calc可以在这里出手相救:

input {
width: calc(100% - 1em);
padding: 0.5em;
}

因为我们知道填充会增加元素的宽度，所以我们只需要从总宽度中减去填充。它受到所有主流浏览器的支持，具有响应性，并且不需要混乱的包装 div。


提交答案