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

【问题标题】：Styling validation messages in html form以 html 形式设置验证消息的样式
【发布时间】：2013-04-12 03:31:43
【问题描述】：

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

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

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

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

这是 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 属性设置为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 自动生成的）。

【问题讨论】：

标签： html css forms

【解决方案1】：

将文本区域向左浮动-

textarea {
  float:left;
}

新的演示http://jsfiddle.net/kevinPHPkevin/wCVK2/1/

【讨论】：

谢谢。有没有办法在不重新排序 HTML 的情况下做到这一点？
好极了。我不敢相信它这么简单（而且我自己也想不通......非常尴尬）谢谢你的帮助。