html - 以 html 形式设置验证消息的样式

标签 html css forms

我正在尝试设置由我的 ASP.NET MVC 3 应用程序生成的表单 HTML 的样式。使用默认样式，标签堆叠在输入控件的顶部，如下所示:

enter image description here

我更改了 css，使标签位于输入控件的左侧，如下所示:

enter image description here

但是，当输入控件是文本区域并且显示验证消息时，我遇到了问题:

enter image description here

如您所见，验证消息与文本区域的底部对齐。 我希望它与文本区域的顶部对齐。

这是 MVC 脚手架生成的 HTML 的一个很好的近似值(结构相同，但我省略了一些 HTML 属性):

<Fieldset>
    <Legend>Form Title</Legend>

    <div class="editor-label">
        <label>Town / City</Label>
    </div>

    <div class="editor-field">
        <textArea></textArea>
        <span class="field-validation-error">
            <span>The town / city field is required</span>
        </span>
    </div>

</Fieldset>

这是我当前的 CSS:

.editor-label {
    margin: .8em 0 0 .5em;
    clear: left;
    float:left;
    width: 160px;
}

.editor-field {
    margin: .5em 0 0 0;
    float: left;
}

我尝试添加一个针对 <span> 的样式类 field-validation-error和 <textarea>并设置他们的 display属性(property)inline-block但这不会改变验证错误的显示方式。

.field-validation-error {
    color: #FF0000;
    display: inline-block;
}

textarea {
    font: inherit;
    min-height: 75px;
    display: inline-block;
}

有没有办法定位 span 元素并与 textarea 的顶部对齐显示？理想情况下，我不想更改 HTML(因为这是由 ASP.NET MVC 自动生成的)。

最佳答案

将文本区域向左浮动-