CSS - форма с двумя столбцами, поддерживающая правильный порядок табуляции?

Question

В настоящее время я создаю форму, которая будет действовать как форма редактирования профиля. В моем дизайне поля разбиты на две колонки.

Я пытаюсь сохранить правильный порядок табуляции в моей форме, поэтому, если вы используете табуляцию, вы пройдете вниз по левому столбцу, а затем по правому столбцу. Моя проблема в том, что я не могу заставить их выстроиться так, как я хочу!

Пароль должен быть прямо справа от имени пользователя, Пароль (снова) должен быть прямо справа от Компании и т. Д.

Пожалуйста, посмотрите прикрепленный JSFiddle, чтобы увидеть, где я до - http://jsfiddle.net/Dhz6u/

Есть идеи?

Спасибо!

Answer 1

Вы должны использовать свойство 'tabindex' полей.

<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">

http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex

Answer 2

Попробуйте использовать отрицательное поле справа div s:

margin: -72px 0 72px;

Вам нужно положительное нижнее поле, чтобы убедиться, что div s не перекрываются.

Для второго набора полей вам нужно дать ему еще большее отрицательное поле, но если вы знаете количество элементов div и можете задать им высоту набора, это не должно иметь большого значения.

См. http://jsfiddle.net/chris5marsh/Dhz6u/4/