html - 如何在不影响居中内容的情况下显示验证消息？

Question

我下面的表单(我删除了所有其他行)在其父 div 中很好地居中显示。问题是当我开始编辑字段时，如果出现验证错误，当验证消息出现在编辑器的右侧时，整个表单将重新居中以适应新的内容宽度。很烦人。然后我尝试将所有 ValidationFor 移动到一个单独的右对齐 div 中。但同样的问题。一旦在右对齐的 div 中出现错误，中心表格就会移动。

我怎样才能:

1) 让表单居中显示，但在初始加载后停止自动居中？将验证消息显示在编辑器的右侧会很好，但我不希望屏幕布局不断变化。

2) 有没有办法预先分配一些隐藏的左右宽度，以便主要表单元素(标签和编辑器)保持居中并且验证消息不会影响居中内容？

 <table style="margin-left:auto;margin-right:auto">
        <tr>
            <td class="FieldLabel">
                Name:
            </td>
            <td class="FieldEditor">
                @Form.TextBoxFor(model => model.Data.LocationName, new { style = "width:300px" })
                @Form.ValidationFor(model => model.Data.LocationName)
            </td>
        </tr>
 </table>

Answer 1

演示:http://jsfiddle.net/murid/9m5gcare/1/

添加另一个“td”来保存错误，将其留空并在需要时用错误填充它。给它一个宽度，并给窗体同样的间距，让左边对齐。

<table>
    <tr>
        <td class="FieldLabel">Name:</td>
        <td class="FieldEditor"><input type="text"></td>
        <td class="error"></td>
    </tr>
</table>

---

table {
    margin: 0 auto;
    border: 1px solid #000;
}

td:first-of-type {
    padding-left: 100px;
}

td.error {
    width: 100px;
    color: red;
}