帮助形成样式 - 为什么我的输入漏出表单？

Question

请参考以下example：

我试图在细胞内建立一定量的填充抱着我的投入，并在文本输入自己，使文本不对接起来反对两侧。我将输入宽度设置为100％，但由于某些原因，它们超出了表单的宽度。谁能解释为什么？

Answer 1

问题是如何填充/宽度工作...填充实际上有助于宽度，所以当您将输入的宽度定义为100％时，它是其父项的100％..当您添加填充4px左右，你的输入宽度现在是parent + 8px的100％。

您可以通过添加（在本例8像素）的宽度和填充的差异家长填充弥补这一点：

form table td { 
    border: 1px solid #D7E5F2; 
    padding: 4px 16px 4px 8px; 
} 

注意，正确的有现在边填充原来是加上了8px它有加上8像素的额外宽度，输入元素包含前... 16px的总:)

另外要注意，这种方法犯规降低您的输入元素中的填充，只是补偿吧:)

你可以看到它在这里工作：http://jsfiddle.net/a7u8N/3/

希望帮助:)

Answer 2

您可以通过使用这个代替4个像素降低疗效：

padding-top: 2px; 
    padding-left: 4px; 

，消除底部填充和右填充它并不完全适合摆在首位。

Answer 3

为什么发生这种情况，因为其他人认为究其原因，是因为宽度：100％使输入的宽度以匹配父元素。填充和添加到输入的边框除了宽度之外，并不包含在其中作为它的一部分 - 因此，您会得到一个总体超过父元素宽度的输入。

我建议阅读一下box模型的工作原理，因为它对理解这个特殊问题很重要，而且对于使用CSS布局一般来说也很重要。

http://www.w3.org/TR/CSS21/box.html