0

我正在使用 a<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; }

然而，它似乎呈现如下：

正常渲染 使用 tr/td 轮廓渲染

为什么<button>元素没有水平填充单元格？

4

2 回答 2

2

我认为您可能正在寻找box-sizing，它决定了在计算宽度/高度时是否添加或排除边距/填充。

box-sizing：边框框；

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

编辑：默认情况下它在按钮上（如果您检查元素，您会看到浏览器已经添加了它）。它可以添加到您的文本区域和输入字段中，以使它们与您的按钮匹配。

如果你看你的屏幕截图。输入字段超出了 TD 并且按钮似乎是唯一真正起作用的按钮。

于 2012-08-08T01:26:08.080 回答
1

大卫我看了你的 html 并基于它创建了一个jsFiddle 。然后我修改了您的 css 以使用您正在寻找的box-sizing 属性。尽管它应用于 DOM 上的其他对象，但您可能希望将其提取到它自己的类中，仅用于文本区域。

于 2012-08-08T01:33:17.300 回答