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

Question

所有

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

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

ASP.NET正在生成所有HTML，所以我在某些方面受到了限制。 我可以访问.field-validation-error类并覆盖它，这就是我所做的。

我的CSS工作（至少在FireFox中）并产生以下内容：

我不得不使用负边距顶部来获取元素下的消息，我对此并不满意。

我该如何改善这个？

谢谢！

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;
}

这是小提琴

http://jsfiddle.net/L28E7/