CSS - 在元素下方放置验证消息 - MVC 3

Question

全部，

我需要在元素下方而不是旁边显示任何输入验证消息。基本 CSS 文件在 <input /> 上放置了一个 margin-bottom = 19px。元素，所以我需要抵消它，因为如果我不这样做，消息将插入输入元素下方 19px 处。

示例: http://jsfiddle.net/L28E7/2/

ASP.NET 正在生成所有的 HTML，所以我在我能做的事情上有些受限。我可以访问 .field-validation-error 类并覆盖它，这就是我所做的。

我的 CSS 有效(至少在 FireFox 中)并生成以下内容:

我不得不使用负 margin-top 来在元素下方获取消息，我对此并不满意。

我该如何改进？

谢谢!

CSS

div .field-validation-error {
    color: #C1372A !important;
    display: block;
    font-weight: normal !important;
    margin-top: -19px;
    margin-bottom: 10px;
}

HTML

<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>

Answer 1

如果这是您的 HTML 在创建内联错误消息后的样子

<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>

然后使用下面的 css。这会自动将您的消息放在文本框下方

.field-validation-error {
   color: #C1372A !important;
   display: block;
   font-weight: normal !important;
}

这是 fiddle

http://jsfiddle.net/L28E7/