以html格式设置验证消息的样式

Question

我正在尝试设置由我的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自动生成的）。

Answer 1

将文本区域浮动到左侧 -

textarea {
  float:left;
}

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