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