ASP.NET MVC視圖對齊文本框

我喜歡對齊我的文本框，以便文本框在右下方。ASP.NET MVC視圖對齊文本框

我有以下代碼：

 <div style="text-align: left; width: 1000px"> 
    <fieldset> 
     <legend>Information</legend> 
     @Html.Label("Collector") 
     @Html.TextBoxFor(model => model.Collector) 
     <br /> 
     <br /> 
     @Html.Label("Email") 
     @Html.TextBoxFor(model => model.Email)  
</fieldset> 
</div>

我知道使用的表是不是要走的路。還有什麼其他方法可以確保文本框字段正確對齊。

來源

2014-05-08 Nate Pet

有幾種方法可以解決這個問題。你可以做線沿線的東西：

<div style="text-align: left; width: 1000px"> 
    <fieldset> 
     <legend>Information</legend> 
     <div class="form-element-row">   
     @Html.Label("Collector") 
     @Html.TextBoxFor(model => model.Collector) 
     </div> 
     <div class="form-element-row"> 
     @Html.Label("Email") 
     @Html.TextBoxFor(model => model.Email) 
     </div> 
     </fieldset> 
</div>

在你的CSS文件或頭，那麼你可以定義表單元素行的對齊（使每個表單元素行DIV落在上下方）。您可以定義標籤（由Html.Label生成的代碼）和輸入（通過TextBoxFor生成的代碼）保證金的，寬的，使得它們通常排列：

.form-element-row 
{ 
    /* alignment here */ 
} 

.form-element-row label 
{ 
    display:inline-block; 
    width:125px; 
} 

.form-element-row input 
{ 
    width:350px; 
}

See this jsfiddle example。我稍微修改了代碼 - 我在父級div上添加了一個類，因此您不必爲每個子div添加一個類。

來源

2014-05-08 17:26:38

嗨德魯，你可以填寫什麼樣的值應爲.css。我仍然沒有得到正確的結果。 –

[jsfiddle示例]（http://jsfiddle.net/iamdrew/E3b7e/） - 這是非常基本的CSS –

這是一個替代解決方案，它只在頂層定義一個類。它不需要爲頁面上的每個div添加一個類。 [jsFiddle更新]（http://jsfiddle.net/iamdrew/E3b7e/1/） –

另外，您可以使用引導，純CSS，基金會等，這些將得到一個一致的感受之類的形式等

http://getbootstrap.com/css/#forms

幫助

您可以自定義這些框架只包括你的元素想但我通常只包括很多。

來源

2014-05-08 19:37:04

ASP.NET MVC視圖對齊文本框

回答

相關問題