Мне нравится выравнивать текстовые поля, чтобы текстовые поля были справа друг от друга.
У меня есть следующий код:
<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>
Я знаю, что использование таблиц - это не путь. Какие еще существуют средства, чтобы обеспечить правильное выравнивание полей текстовых полей.
В качестве альтернативы вы можете использовать бутстрап, чистый CSS, фундамент и т.д., Это поможет с постоянным восприятием таких вещей, как формы и т.д.
http://getbootstrap.com/css/#forms
Вы можете настроить эти фреймворки, чтобы включать только те элементы, которые вы хотите, но я обычно включаю эту партию.
Есть несколько способов сделать это. Вы могли бы сделать что-то вроде:
<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;
}
См. Этот пример jsfiddle. Я немного изменил код - я добавил класс в div родительского уровня, поэтому вам не нужно добавлять класс к каждому дочернему div.