Question

我的表单（我已经删除了所有其他行）显示在其父级div中。问题是当我开始编辑字段时，如果存在验证错误，当验证消息出现在编辑器的右侧时，整个表单将重新居中以获得新的内容宽度。很烦人。然后我尝试将所有ValidationFors移动到一个单独的右对齐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

DEMO：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;
}

如何显示验证消息而不影响居中内容？

1 个答案: