CSS - 按钮不填充表单元格

Question

我正在使用<table>来布置标准HTML联系人表单。我们不要讨论使用表格的优点，因为HTML不应该用于表示而是结构（这就是为什么我认为它是合理的）。

尽管如此，这里是标记和CSS我使用（通过ASP.NET MVC的生成）：

  <table class="fieldTable"> 
       <tbody> 
        <tr> 
         <th><label for="Name">Your name</label></th> 
         <td><input id="Name" name="Name" type="text" value="" /></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
        </tr> 

        <tr> 
         <th><label for="EmailAddress">Your e-mail address</label></th> 
         <td><input id="EmailAddress" name="EmailAddress" type="text" value="" /></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
        </tr> 

        <tr> 
         <th><label for="MessageBody">Message</label></th> 
         <td><textarea cols="30" id="MessageBody" name="MessageBody" rows="6"></textarea></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
        </tr> 

        <tr> 
         <td></td> 
         <td><button type="submit"><span>Send Message</span></button></td> 
        </tr> 
       </tbody> 
      </table> 

我的CSS：

.fieldTable th { 
    text-align: right; 
    font-weight: normal; 
    vertical-align: top; 
    padding: 0.25em; 
    padding-right: 0.5em; } 

.fieldTable input, 
.fieldTable textarea, 
.fieldTable button { 
    width: 100%; } 

input, textarea, button { 
    border: 1px solid #999; 
    padding: 0.5em; 

    border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 7px 3px #c4c4c4; 
    box-shadow: 0px 0px 7px 3px #c4c4c4; } 

button  { background: #DDD; position: relative; } 
button:hover { background: #FFF; } 
button:active span { position: relative; top: 2px; left: 2px; } 

tr { outline: 1px solid blue; } 
td { outline: 1px solid red; } 

但是它似乎呈现像这样：

为什么<button>元素不能水平填充单元格？

Answer 1

我想你可能会在寻找box-sizing，这是什么决定是否在计算宽度/高度时添加或排除边距/填充。

box-sizing：border-box;

这应该允许您设置百分比宽度/高度，它会填充而不会溢出。

编辑：它是默认的按钮（如果你检查元素，你会看到浏览器已经添加它）。它可以添加到您的textareas和输入字段，以使它们与您的按钮匹配。

如果你看看你的屏幕截图。输入字段在TD之外，按钮似乎是唯一真正表现的。

Answer 2

David我看了一下你的html并创建了一个基于它的jsFiddle。然后我修改了你的css，使用你正在寻找的box-sizing property。尽管它适用于DOM上的其他对象，但您可能只想将其提取到它自己的类中，仅用于textareas。