Стилизация формы, где поля ввода имеют неявные метки (обернутые в метки)

Question

Учитывая HTML-форму, как это:

<form action='/example/' id='example_form' method='POST' name='example_form'>
  <fieldset>
    <legend>Example form</legend>
    <label for='age'>
      Age
      <input id='age' name='age' tabindex='1' type='text' />
    </label>
    <label for='gender'>
      Gender
      <select id='gender' name='gender' tabindex='2'>
        <option disabled='disabled' id='gender' name='gender' value=''>Choose one:</option>
        <option id='gender_female' name='gender' value='female'>Female</option>
        <option id='gender_male' name='gender' value='male'>Male</option>
      </select>
    </label>
    <label for='height'>
      Height
      <input id='height' name='height' size='3' tabindex='3' type='text' />
    </label>
    <label for='weight'>
      Weight
      <input id='weight' name='weight' size='4' tabindex='4' type='text' />
    </label>
    <input id='Save' tabindex='5' type='submit' value='Save' />
  </fieldset>
</form> 

Как бы вы применили стиль, чтобы получить классическое табличное расположение надписей слева, поле справа, все выровнено по вертикали? Таблицы явно исключены. Я не могу найти ничего о том, как это сделать с неявными ярлыками и только с CSS.

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

1. Это сгенерированный html.
2. Я продолжаю читать о том, как использование неявных меток улучшает доступность.

Любая помощь / указатели / понимание будет высоко ценится.

Answer 1

Или, в зависимости от того, что вы подразумеваете под «вертикально выровненным», вы можете попробовать это.

label {
    display: block;
    position:relative;
    margin: 0 0 5px 0;
}
label > input,
label > select {
    position: absolute;
    left: 70px;
    width: 100px;
}

jsfiddle здесь

или альтернатива здесь

Answer 2

Вот некоторые основные стили для начала работы

пример jsfiddle

fieldset {width:300px;}
label {display:block;overflow:hidden;line-height:30px;}
label input, label select {float:right;}
input[type=submit] {float:right;width:100px;border:solid 1px;}

Answer 3

CSS никогда не перестанет меня удивлять. На основании ответа @magicalex я придумал следующее:

label {
    display: block;
    position:relative;
    text-align: right;
    width: 100px;
    margin: 0 0 5px 0;
}
label > input,
label > select,
input {
    position: absolute;
    left: 120px;
}

Это позволяет сделать большую часть того, что я имел в виду, а именно горизонтальную компоновку со всеми метками, выровненными по правому краю, и со всеми полями, выровненными по левому краю, даже если они были разной ширины (что неизбежно, например, для устройства выбора даты iOS и т.п.).

Однако JSFiddle иллюстрирует оставшуюся проблему выравнивания поля, если метка разбита на несколько строк (например, из-за переводов). Но, думаю, это тоже можно решить.