ASP.NET MVC Просмотреть выравнивание текстовых полей

0

Мне нравится выравнивать текстовые поля, чтобы текстовые поля были справа друг от друга.

У меня есть следующий код:

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

Я знаю, что использование таблиц - это не путь. Какие еще существуют средства, чтобы обеспечить правильное выравнивание полей текстовых полей.

Теги:
asp.net-mvc

2 ответа

0

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

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

Вы можете настроить эти фреймворки, чтобы включать только те элементы, которые вы хотите, но я обычно включаю эту партию.

0

Есть несколько способов сделать это. Вы могли бы сделать что-то вроде:

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

  • 0
    Привет, Дрю, можешь ли ты указать, какие значения для примера должны быть для .css? Я все еще не получаю правильные результаты.
  • 0
    Пример jsfiddle - это довольно простой CSS
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню