Advanced Search

Styling forms with definition lists

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <form>
  2. <dl>
  3. <dt>Email:</dt>
  4. <dd><input type="text" name="email" /></dd>
  5. <dt>Name:</dt>
  6. <dd><input type="text" name="name" /></dd>
  7. </dl>
  8. </form>
  9.  
  10. /*CSS*/
  11. FORM DT {
  12.    clear:both;
  13.    width:33%;
  14.    float:left;
  15.    text-align:right;
  16. }
  17.  
  18. FORM DD {
  19.    float:left;
  20.    width:66%;
  21.    margin:0 0 0.5em 0.25em;
  22. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.