Как создать 2 столбца для разделения метки и элемента ввода в форме

Question

Моя форма выглядит так:

**

    <p><label>first name</label><input type=text name=fn /></p>
    <p><label>last name</label><input type=text name=ln /></p>

</div>
<div id="rightform">
    <p><label>state</label><input type=text name=state /></p>
    <p><label>city</label><input type=text name=city /></p>

</div>

**

Мне нужен макет, чтобы все метки были выровнены слева (текст метки выровнен по правому краю), а поле ввода выровнено, а плавающее влево.

Таким образом, форма должна выглядеть так:

          asdf-label INPUTBOX
           123-label INPUTBOX
   yet-another-label INPUTBOX

В правой части вышеуказанной формы будет другая форма (с id = # rightform)

Действительно запутался, как это сделать правильно ...

Answer 1

Лично я редко использую плавающую технику, хотя она очень распространена. Причина: это очень хрупко для более сложных ситуаций.

Я почти всегда так делаю:

<form ...>
  <p>
    <label for="id1">Label 1</label>
    <input id="id1" ... />
  </p>
  <p>
    <label for="id2">Label 2</label>
    <input id="id2" ... />
  </p>
</form>

И CSS:

p {
  position: relative;
}
label {
  position: absolute;
  width: 150px;
  left: 0;
  top: Xpx /* x to align nicely with the baseline of the text in the input */
}
input {
  margin-left: 160px;
}

Очень редко возникает проблема с многострочными метками, которые переполняют

.

Чтобы он работал в IE6 и, возможно, IE7, вам нужно добавить что-то, чтобы получить

hasLayout. зум: 1; делает трюк, или указание ширины.

Answer 2

Это должно сделать это:

label {
    width: 150px;
    margin-right: 10px;
    text-align: right;
    float: left;
}

Нет необходимости в каких-либо специальных стилях для элементов ввода.

Что касается div, просто дайте им фиксированную ширину, и float: left;, они будут хорошо совмещаться рядом друг с другом. Просто используйте clear: both;, где это необходимо.

Answer 3

Вам нужно будет переместить все ваши метки влево, установить их на фиксированное значение, а затем выровнять их по тексту вправо:

label {
  float:left;
  text-align:right;
  width:20em;
}

p {
  clear:right;
}

Answer 4

Ну, простой способ - это таблица, но это не правильно.

<div style="float: left; width: 100px;">
    <label>last name</label>
</div>
<div style="margin-left: 100px;">
    <input type=text name=state />
</div>

Answer 5

Самый простой способ - плавать элементы и устанавливать ширину и выравнивание текста: вправо для меток.

Что-то вроде:

label {
    width:200px;
    text-align:right;
}

input {
    float:left;
}

Вы можете проверить http://jeffhowden.com/code/css/forms/ для примера css