css - Styling a form where the input fields have implicit labels (wrapped in labels) -

css - Styling a form where the input fields have implicit labels (wrapped in labels) -

given html form this:

<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>

how style classic table based layout of label left, field right, aligned vertically? tables out of question. can't find on how implicit labels , css.

if reply not wrap fields it, i'd prefer if solution found as:

this generated html. i maintain reading how using implicit labels improves accessibility.

any help/pointers/insight much appreciated.

here basic stylings started

example 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;}

css forms