Поля формы макета без таблиц

Question

У меня есть очень простая верстка HTML, которую я пытаюсь реализовать.Это что-то вроде этого:

A Label:         [Input                ]
Another Label:   [Input                ]
The Last Label:  [Input                ]

Раньше я просто использовал для этого таблицу.В противном случае это затрудняет правильное выравнивание элементов управления вводом.

Может кто-нибудь предложить простой и надежный способ реализации этого макета без использования таблицы?

Answer 1

Вы можете использовать display: inline-block

<style type="text/css">
  label { display: inline-block; width: 200px; }
  ul { list-style: none; }
</style>

<ul>
  <li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
  <li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
  <li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>

Однако, чтобы это выровнялось по вертикали, вы должны либо обернуть пары метка-вход в другой тег (например, <li> или <div>), либо поставить разрывы строк после входных данных.

Answer 2

<style>
  label { width: 200px; float:left; clear:left; } 
  input { float:left;} 
</style>
<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname" id="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email" id="email">
</form>

С дополнительным преимуществом: если горизонтального пространства недостаточно, входные данные будут обтекать над метками.

http://jsbin.com/anuziq (сузить окно браузера)

Если вы на самом деле не хотите, чтобы они оборачивались, я предлагаю следующий подход:

<style>
   label { white-space: nowrap; } 
   span { width: 200px; display: inline-block; }
</style>
<form>
  <label>
      <span>Full Name:</span>
      <input type="text" name="fullname">
  </label>
  <label>
      <span>Email Address:</span>
      <input type="text" name="email">
  </label>
</form>

Из моего опыта структурирование HTML-кода, как это обычно допускает любой макет, о котором вы только можете подумать.Хотите, чтобы входы всегда были ниже метки?Используйте display:block на элементах span.Хотите текст справа от input?Просто используйте float:right для span.

. Бонус здесь заключается в том, что вам не нужны атрибуты for и id для подключения метки к входу.Они действительно необходимы, если вы не можете поместить метку рядом с входом, как в 2 отдельных ячейках таблицы.