Tabular form controls HTML css -

Tabular form controls HTML css -

i making simple (ha!) table. there problems i've included fix.

i left hand edges of input fields line up. checkbox , button don't. i vertically center text in labels w.r.t. associated text input controls. i avoid 12em margin on final submit button.

thanks. ideas appreciated.

class="snippet-code-css lang-css prettyprint-override"> p { text-align: center; } p label { float: left; clear: left; width: 20em; text-align: right; margin: .25em 1em 0em 0em; padding: .25em; } p label input { float: right; clear: right; padding: .25em; } #submit { clear: both; float: left; margin: 1em 0em 0em 12em; clear: left; width: 6em; text-align: center; background: yellow; } p > input { text-align: center; } span { padding: 0em 1em 0em 0em; } class="snippet-code-html lang-html prettyprint-override"><form> <div> <p> <label><span>name:</span> <input id="name" type="text" placeholder="name" autofocus required> </label> </p> <p> <label><span>password:</span> <input id="password" type="password" placeholder="password" required> </label> </p> <p> <label><span>are photographer?:</span> <input id="photog" type="checkbox"> </label> </p> <p> <input type="submit" id="submit" value="register"> </p> </div> </form>

this doesn't want it's start. i've taken <input> elements outside of <label> elements allowing <label>s fixed width adding display: inline-block. gave <label>s for attribute maintain them linked corresponding <input> field. adding empty <label> in front end of submit button gets proper layout.

in general it's thought utilize float little possible , style using classes instead of styling html elements directly. @ bootstrap (in case forms styling) see how it.

class="snippet-code-css lang-css prettyprint-override">label { width: 11em; display: inline-block; text-align: right; margin-right: .25em; padding: .25em; } input { padding: .25em; } #submit { margin: 1em 0em; text-align: center; background: yellow; } class="snippet-code-html lang-html prettyprint-override"><form> <div> <p> <label for="name">name:</label> <input id="name" type="text" placeholder="name" autofocus required> </p> <p> <label for="password">password:</label> <input id="password" type="password" placeholder="password" required> </p> <p> <label for="photog">are photographer?:</label> <input id="photog" type="checkbox"> </p> <p> <label></label> <input type="submit" id="submit" value="register"> </p> </div> </form>

html css