MVC 3で垂直方向にテキストボックスを整列する剃毛

Question

私は自分のプロジェクトでテキストボックスを垂直に整列させる方法が苦労していますので、私はCSSで多くの変更を行いますが、

.display-label, 
.editor-label 
{ 
margin: 1.0em 0 0 0; 
} 

.display-field 
.editor-field 
{ 
margin-left:200px; 
float: left; 
width: 200px; 

} 

Output

Answer 1

：

@Html.EditorFor(model => model.FirstName) 
@Html.ValidationMessageFor(model => model.FirstName) 
</div> 

<div class="editor-label"> 
@Html.LabelFor(model => model.MiddleName) 

@Html.EditorFor(model => model.MiddleName) 
@Html.ValidationMessageFor(model => model.MiddleName) 
</div> 

<div class="editor-label"> 
@Html.LabelFor(model => model.LastName) 

@Html.EditorFor(model => model.LastName) 
@Html.ValidationMessageFor(model => model.LastName) 
</div> 

そして、ここでは私のスタイルシートです @ Html.LabelFor（モデル=> model.FirstName）：

は、ここで作成と編集のための私の部分図です

問題を正しく理解していれば、テキストをある列に、入力フィールドを別の列に表示してください。すべて整列しています。

あなたのCSSでこれを持つ試すことができます：それはあなたのニーズにフィットするまで

.editor-label 
{ 
margin: 1.0em 0 0 0; 
width: 100px; 
display:block; 
} 

は、あなたが何かに小さい100pxに変更することができます。

.editor-field 
{ 
margin-left:200px; 
float: left; 
width: 200px; 
} 

display：ブロックは、内容を記入する必要があるかどうかにかかわらず、スペースを割り当てます。その後、あなたの問題を解決するかもしれません。