Как правильно выровнять теги формы?

Question

Я хочу выровнять элементы ввода и формы по правому краю, а информацию метки - по левому краю, сохраняя при этом центру метки по вертикали с каждым входом, до которого она выровнена. Мне также нужно некоторое пространство между каждым тегом <li> как таковым.

Здесь вы можете посмотреть, о чем я говорю и спрашивать ... http://jsfiddle.net/CCxwF/

Answer 1

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

label {display: block; margin: 5px 10px; float: left; width: 200px; position: relative;}
input, select {float: left; width: 150px;}
ul li {clear: both;}
input.checkbox {width: inherit; margin: 5px 0 0 0;}

Answer 2

Я полностью удалил <ul>, установка display: block на <label> s делает трюк просто отлично.

Пример

В этом примере каждый <label> устанавливается как элемент уровня block, а каждый <input> или <select> устанавливается как плавающий прямо внутри него. Черные линии предназначены только для ясности (только для того, чтобы вы могли видеть, что такое метки).

Answer 3

Мне лично нравится использовать списки определений (хотя это не выравнивает по вертикали ваши <label>.

См .: http://jsfiddle.net/Wexcode/CCxwF/5/

Вы также можете рассмотреть возможность добавления атрибутов idк вашим элементам в ваших формах, и делает label for="element-id"