填充内的填充符宽度为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。 但它有一些兼容性问题。