CSS - 在元素下方放置驗證消息 - MVC 3

全部，CSS - 在元素下方放置驗證消息 - MVC 3

我需要在元素下方顯示任何輸入驗證消息，而不是在旁邊顯示。基本的CSS文件在<input />元素上放置了margin-bottom = 19px，所以我需要抵消這一點，因爲如果我沒有在輸入元素下面插入19px的消息。

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

ASP.NET正在生成所有的HTML，所以我有點在我能做些什麼方面掣肘的。我可以訪問.field-validation-error類並覆蓋它，這就是我所做的。

我的CSS作品（在Firefox中至少），併產生下列：

enter image description here

我不得不使用負邊距得到消息右側的元素，對此我不是很滿意。

我該如何改進？

謝謝！

的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>

來源

2013-12-19 Slinky

想知道的CSS如何爲你工作，跨度類是你需要爲錯誤上工作消息，但您正在將Css分配給DIV。 –

，如果這是你的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>

然後使用後低於cs秒。這將自動把您的信息下面的文本框中

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

這裏是小提琴

http://jsfiddle.net/L28E7/

來源

2013-12-19 14:53:56

問題實際上是分配給所有輸入的保證金最低值。見http://jsfiddle.net/L28E7/2/ – Slinky

CSS - 在元素下方放置驗證消息 - MVC 3

回答

相關問題