Question

我正在尝试在持有输入的单元格内建立一定量的填充，并在文本输入中自己，这样文本就不会碰到边。我将输入宽度设置为100％，但由于某种原因，它们超出了表单的宽度。任何人都可以解释原因吗？

form {  
 color: #000000;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 width:100%;
}

form table {    
  background-color: #F9FBFD;    
  color: #000000;    
  width: 100%;    
  border: 1px solid #D7E5F2;    
  border-collapse: collapse;    
}    

form table td {  
  border: 1px solid #D7E5F2;  
  padding: 4px 8px;  
}

input[type="text"], input[type="password"], textarea {
    width: 100%;
    border: 1px solid #999;   
    padding:2px 4px;
}

<form id="signup" name="signup" method="post" action="#">  
                          <table>  
                            <tr>    
                              <td ><label for="name">Name</label></td>  
                              <td><input type="text" id="name" name="name" tabindex="1"  /></td>  
                            </tr>  
                           
                            <tr>    
                              <td><label for="email">Email *</label></td>  
                              <td><input type="text" id="email" name="email" tabindex="2" /></td>  
                            </tr>  
                            
                            <tr>    
                              <td class="top"><label for="topic">Your Message</label></td>  
                              <td><textarea id="comment" name="comment" tabindex="3" rows="5" cols="30"></textarea></td>  
                            </tr>  
                            
                            <tr>    
                              <td colspan="2"><input type="submit" name="Submit" value="Send" tabindex="8" /></td>  
                            </tr>  
                          </table>  
                        </form>

此example是原始参考。

Answer 1

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

您可以通过将宽度和填充（本例中为8px）的差值添加到父级填充来补偿：

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

注意，右边有侧边填充现在是原来的8px它之前加上输入元素包含的8px额外宽度... 16px总计：）

另请注意，此方法不会减少输入元素中的填充，只需补偿它：）

您可以在此处看到它：http://jsfiddle.net/a7u8N/3/

希望有所帮助：）

Answer 2

正如其他人所说，之所以发生这种情况，是因为宽度：100％会导致输入的宽度与父元素的宽度相匹配。添加到输入中的填充和边框是宽度的补充，并且不包含在其中 - 因此您获得的输入总体上超过了父元素的宽度。

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

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

Answer 3

您可以使用此效果将效果减少4个像素：

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

删除底部填充和右边填充，这些填充首先不适用。

表单样式 - 为什么我的输入溢出表单？

3 个答案: