我正在使用 <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>
水平填充单元格的元素?
最佳答案
我想您可能正在寻找 box-sizing ,它决定了在计算宽度/高度时是否添加或排除边距/填充。
box-sizing: border-box;
这应该允许您设置百分比宽度/高度,并且它会填充而不会溢出。
编辑:默认情况下它位于按钮上(如果您检查该元素,您会看到浏览器已经添加了它)。它可以添加到您的文本区域和输入字段,使它们与您的按钮相匹配。
如果您查看屏幕截图。输入字段在 TD 之外,按钮似乎是唯一真正起作用的。
关于html - CSS - 按钮不填充表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11856396/