Styling forms with definition lists


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



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.