HTML格式的验证消息样式

我试图对由我的ASP.NET MVC 3应用程序生成的表单HTML进行样式设置。使用默认的风格标签输入叠放控制，像这样：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属性风格10，但这不会改变验证错误的显示方式。

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

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

有没有一种方法来定位跨度元素并显示符合textarea的顶部？理想情况下，我不想修改HTML（因为这是由ASP.NET MVC自动生成的）。

来源

2013-04-11 Benjamin Gale