Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jun 26th, 2012  |  syntax: None  |  size: 0.77 KB  |  hits: 8  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. CSS Media Query Tricks
  2. <div class="classname">
  3.   Item 1<br />
  4.   Item 2<br />
  5.   Item 3<br />
  6.   etc
  7. </div>
  8.        
  9. <div class="classname">
  10.   Item 1&nbsp;&nbsp;
  11.   Item 2&nbsp;&nbsp;
  12.   Item 3&nbsp;&nbsp;
  13.   etc
  14. </div>
  15.        
  16. <ul class="classname">
  17.   <li>Item 1</li>
  18.   <li>Item 2</li>
  19.   <li>Item 3</li>
  20.  </ul>
  21.  
  22.  case 1:
  23.  ul.classname li { display: block }
  24.  
  25.  case 2:
  26.  ul.classname li { display: inline; padding-right: 24px }
  27.        
  28. <ul class="classname">
  29.     <li>Item 1</li>
  30.     <li>Item 2</li>
  31.     <li>Item 3</li>
  32. </ul>
  33.        
  34. ul.classname {
  35.     /* First, override browser defaults: */
  36.     list-style: none;
  37.     padding: 0;
  38.     margin: 0;
  39.     text-indent: 0;
  40. }
  41.  
  42. ul.li {
  43.     display: block;
  44.     padding: 0;
  45.     margin: 0;
  46.     text-indent: 0;
  47. }
  48.        
  49. ul.li {
  50.     display: inline;
  51.     margin-right: 2em;
  52. }