Advertisement
Guest User

Untitled

a guest
Feb 2nd, 2011
709
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.30 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Styling DL lists</title>
  5.         <style>
  6.             dl {
  7.                 overflow: hidden;
  8.  
  9.                 /* these rules don't affect the positioning */
  10.                 background: #ccc;
  11.                 margin: 0;
  12.                 padding: 0.5em;
  13.                 max-width: 30em;
  14.             }
  15.             dt, dd {
  16.                 margin-top: 0.5em;
  17.             }
  18.             dt {
  19.                 clear: both;
  20.                 float: left;
  21.                 width: 6em;
  22.  
  23.                 /* these rules don't affect the positioning */
  24.                 font-style: italic;
  25.                 text-align: right;
  26.             }
  27.             dd {
  28.                 margin-left: 6.5em;
  29.             }
  30.             h1 {
  31.                  display: none;
  32.             }
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <h1>Styling DL lists</h1>
  37.         <dl>
  38.             <dt>Term A</dt>
  39.             <dd>Definition A</dd>
  40.            
  41.             <dt>Term B</dt>
  42.             <dd>A very long definition of B that may span over multiple lines of text. This should not break the flow with the rest of the items in the list.</dd>
  43.            
  44.             <dt>Term C</dt>
  45.             <dd>Definition C1</dd>
  46.             <dd>Definition C2</dd>
  47.             <dd>Definition C3</dd>
  48.            
  49.             <dt>Long term D that spans multiple lines</dt>
  50.             <dd>Definition D</dd>
  51.            
  52.             <dt>Term E1</dt>
  53.             <dt>Term E2</dt>
  54.             <dd>Definition E</dd>
  55.  
  56.             <dt>Long term F with multiple definitions</dt>
  57.             <dd>Definition F1</dd>
  58.             <dd>Definition F2</dd>
  59.            
  60.             <dt>Undefined term G</dt>
  61.             <dd></dd>
  62.            
  63.             <dt>Term H</dt>
  64.             <dd>Definition H</dd>
  65.         </dl>
  66.     </body>
  67. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement