CSS - выравнивание текстовых полей один под другим

Question

CSS - выравнивание текстовых полей один под другим

0

У меня есть код HTML ниже. Я пытаюсь выровнять текстовые поля, чтобы они выстроились один за другим. У меня есть CSS ниже. Не успешный. Обратите внимание, что.Label и.TextBoxFor просто создают и помещают ярлык и текстовое поле.

   <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 style="clear:both"></div>
      <div class="form-element-row">
       @Html.Label("Email")
       @Html.TextBoxFor(model => model.Email)
      </div>
    </fieldset>

Вот css

 .form-element-row
 {
    float: left;
 }

 .form-element-row label
 {
    margin: 0px;
    min-width: 400px;
 }

.form-element-row input
{
  margin: 0px;
  width: 500px;
}

Nate Pet 09 май 2014, в 18:03

Источник

0

более простой способ - использовать <table> вместо div
Kashif Qureshi 09 май 2014, в 15:54
0

Это единственный CSS, используемый на сайте? Я просто взял то, что вы имели выше (кроме синтаксиса бритвы) и сделал скрипку, и все в порядке: jsfiddle.net/U4va5
ewitkows 09 май 2014, в 15:58
0

@ewitkows - Спасибо. Текстовые поля расположены не вертикально, хотя. Как они выстраиваются вертикально.
Nate Pet 09 май 2014, в 16:10

Показать ещё 1 комментарий

Теги:

html

css

asp.net

2 ответа

Ещё вопросы

более простой способ - использовать <table> вместо div
Это единственный CSS, используемый на сайте? Я просто взял то, что вы имели выше (кроме синтаксиса бритвы) и сделал скрипку, и все в порядке: jsfiddle.net/U4va5
@ewitkows - Спасибо. Текстовые поля расположены не вертикально, хотя. Как они выстраиваются вертикально.

Kashif Qureshi · Answer 1 · 2014-05-09T18-44-00.000Z

Самый простой способ - использовать таблицу. Таким образом вам не придется беспокоиться о каких-либо выравниваниях. Вы можете сделать это следующим образом:

<div style="text-align: left; width: 1000px"> 
            <fieldset>
             <legend>Information</legend>
            <table>
                <tr>
                    <td style ="width:30%;">
                        XXX
                    </td>
                    <td>
                        <input type="textbox"/>
                    </td>
                </tr>
                <tr>
                     <td>
                        YyYY
                    </td>
                    <td>
                        <input type="textbox"/>
                    </td>    
                </tr>
            </table>    

            </fieldset>
</div>

Kit MacAllister · Answer 2 · 2014-05-09T14-24-00.000Z

Попробуйте отобразить свои формы в виде элементов списка, например:

.form-element-row label, .form-element-row textarea {
   display: list-item;
   list-style: none;
 }