填充内的填充符宽度为100％
好吧，所以我们知道，设置填充到对象会导致其宽度改变，即使它被明确设置。 虽然人们可以争论这个背后的逻辑，但是对某些元素会造成一些问题。
对于大多数情况下，您只需添加一个子元素并将填充添加到该元素，而不是设置为100％，但对于表单input，这不是一个可能的步骤。
看看这个： http : //sandman.net/test/formcss.html
第二个input的填充设置为5px，我非常喜欢默认设置。 但不幸的是，这使得input在所有方向上增长了10px，包括增加了10px到100％的宽度。
这里的问题是，我不能在input内添加一个子元素，所以我不能修复它。 所以问题是：
有没有办法在input内添加填充，同时仍然保持宽度100％？ 它必须是100％，因为表格会以不同宽度的父母呈现，所以我不知道父母的宽度。
我不知道如何跨浏览器兼容（它在Firefox和Safari浏览器中工作），但你可以试试这个解决scheme：
DIV.formvalue { padding: 15px; } input.input { margin: -5px; }
（只发布我更改的值）
使用CSS3，你可以使用属性框的大小来改变浏览器如何计算input 。
input.input { width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
你可以在这里阅读更多关于它的信息： http : //css-tricks.com/box-sizing/
一种select是将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％的input和一个小的填充。 我所做的是补偿td上的填充如下：
.form td { padding-right:8px; } .form input, .form textarea { border: 1px solid black; padding:3px; width:100%; }
填充8px以包含input/文本区域的边框和填充。 希望这可以帮助！
经常遗忘的calc可以在这里得到拯救：
input { width: calc(100% - 1em); padding: 0.5em; }
由于我们知道填充会增加元素的宽度，所以我们只需从整体宽度中减去填充。 它受到所有主stream浏览器的支持，响应速度快，不需要凌乱的包装器。
也许从边界+背景input ，而不是把它放在一个边框+背景和宽度为100％的div ，并在input上设置一个边距？
我find的一个解决scheme是绝对定位input相对位置的父标签。
<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; }
唯一需要注意的是段落标签需要高度设置，因为绝对定位的孩子不会扩大其高度。 这样可以避免需要通过将其locking在父元素的左侧和右侧来设置width: 100% 。
尝试使用你的填充百分比：
.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%; }
如果您担心旧式浏览器中的用户无法看到箱形阴影，只需给input一个微妙的背景颜色作为备份。 如果你使用像素来处理这种事情，那么你有可能在其他地方使用它们，这可能会带来一些额外的挑战，如果遇到这些挑战，请告诉我们。
只有我知道，以防止这个分配的值如100％-10。 但它有一些兼容性问题。
