2

我正在为我的模型创建非常简单的表格。我已经通过验证为它生成了脚手架的“编辑”视图。一种验证是针对“URL”类型的，它给我带来了问题。

我有这样的看法：

<div class="editor-label">
        @Html.LabelFor(model => model.Server)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Server)
        @Html.ValidationMessageFor(model => model.Server)
</div>

这是 #content 部分的 css，其中包含 View 呈现的所有内容：

#content
{
    border:solid;
    border-width:thin;
    position:relative;
    margin-left: auto ;
    margin-right: auto ;
    text-align:center;
    margin-top: 50px;
    min-width:480px;
    max-width:800px;
    display:table;
    padding: 30px;
}

加载页面时，#content 为 480px 宽，内部元素占用尽可能多的空间（编辑器字段元素和带有提交按钮的元素设置为 100%，css 中没有其他设置宽度）。

当字段上显示“必需”验证消息时，一切正常（宽度不变）。

当我输入无效的 URL 时，消息会更长（默认消息的本地化版本显示“Pole Server neobsahuje plně kvalifikovanou adresu URL protokolu http，https nebo ftp。”）并且整个 #content 宽度更改为 657px；

有没有一种方法可以使宽度保持在显示验证消息之前的状态，并在验证消息太长时将其包装成多行的 CSS 设置？

我想避免固定宽度设置（在主要部分和所有元素上，包括验证消息 div），并且仍然保持布局模板及其 css 通用，这样我就可以继续重复使用它，而无需针对使用它的特定场景进行定制。

提前致谢

我已经包含了显示它的外观的屏幕截图

看截图它的样子

4

0 回答 0