Выровнять текстовое поле по вертикали в MVC 3 Razor

Question

У меня проблемы с выравниванием текстовых полей в моем проекте по вертикали, поэтому я делаю много изменений в моем CSS, но все еще не получаю желаемый результат.

Вот мой частичный виддля создания и редактирования: @ Html.LabelFor (model => model.FirstName)

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

А вот моя таблица стилей:

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

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

}

Вывод

Answer 1

Если я правильно понимаю вашу проблему, вы хотите, чтобы текст отображался в одном столбце, а поля ввода - в другом столбце.все выровнены.

Вы можете попробовать это в своем CSS:

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

вы можете изменить 100px на что-то меньшее, пока оно не будет соответствовать вашим потребностям.display: block будет выделять пространство независимо от того, есть ли у него содержимое для его заполнения.Тогда это может решить вашу проблему.