Как вы распределяете текстовые поля?

Question

У меня есть два текстовых поля, которые я хочу выровнять. Я имею в виду следующее:

[text] --> < input type="text" / >

[More more text] --> < input type="text" / >

Я хочу, чтобы два «входа» были в линии друг с другом. Как переместить первое текстовое поле ввода, чтобы оно соответствовало позиции второго поля, которое перемещается дальше из-за «больше текста».

Answer 1

Два бита текста являются метками для полей ввода, верно?

Вы можете заключить их в тег <label>, например:

<label for='field1'>Some text</label><input type='text' id='field1' /><br />
<label for='field2'>Some more text</label><input type='text' id='field2' /><br />

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

label {
    display:inline-block;
    width:50px;
}

Это должно привести к тому, что ваши поля ввода выровняются.

Существует множество других способов сделать это, но я оставлю вас с этим.

Надеюсь, это поможет.

Answer 2

Используйте элемент таблицы:

<table>
  <tr>
    <td>Text</td>
    <td>Text box</td>
  </tr>
  <tr>
    <td>Even more text</td>
    <td>Text box</td>
  </tr>
</table>

Пример