<style type="text/css" media="screen">

  body { font:12px/12px arial,helvetica,sans-serif; }
  
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  
  ul.inlineRuled {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
    _display:inline-block;
  }
  
  ul.inlineRuled li {
    float:left;
    padding:0 2em 0 1em;      /* padding-right = 2 x padding-left */
    margin-left:-1em;         /* margin-left = -1 x padding-left */
    border-left:1px solid #ccc;
    white-space: nowrap;
  }

  ul.inlineRuledRight {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
    _display:inline-block;
  }
  
  ul.inlineRuledRight li {
    float:right;
    padding:0 1em 0 2em;      /* padding-right = 2 x padding-left */
    margin-right:-1em;         /* margin-left = -1 x padding-left */
    border-right:1px solid #ccc;
    white-space: nowrap;
  }

  /* Decoration */
  #footerNav { font-weight:bold; }
  #footerNav #navLabel { float:left; text-transform:uppercase; width:160px; }
  #footerNav ul.inlineRuled li { margin-bottom:3px; } /* used to increase the line-height without increasing the pipe height */
  #footerNav ul.inlineRuled { margin-bottom:-3px; } /* removes the last bump for better vertical-alignment */

  #footerNav2 { font-weight:bold; }
  #footerNav2 ul.inlineRuled li { margin-bottom:3px; } /* used to increase the line-height without increasing the pipe height */
  #footerNav2 ul.inlineRuled { margin-bottom:-3px; } /* removes the last bump for better vertical-alignment */
</style>


<div id="footerNav">
  <span id="navLabel">More from furf.com</span>
  <ul class="inlineRuled">
    <li><a href="#">American Idol</a></li>
    <li><a href="#">2008 Emmys</a></li>
    <li><a href="#">2009 Oscars</a></li>
    <li><a href="#">Dancing With The Stars</a></li>
    <li><a href="#">Robert Downey Jr.</a></li>
    <li><a href="#">Survivor</a></li>
    <li><a href="#">The Dark Knight</a></li>
    <li><a href="#">Ausiello TV</a></li>
    <li><a href="#">Hell's Kitchen</a></li>
    <li><a href="#">America's Got Talent</a></li>
    <li><a href="#">2008 Fall Movie Preview</a></li>
    <li><a href="#">Radiohead</a></li>
  </ul>
</div>

<div id="footerNav2">
  <ul class="inlineRuledRight">
    <li><a href="#">American Idol</a></li>
    <li><a href="#">2008 Emmys</a></li>
    <li><a href="#">2009 Oscars</a></li>
    <li><a href="#">Dancing With The Stars</a></li>
    <li><a href="#">Robert Downey Jr.</a></li>
    <li><a href="#">Survivor</a></li>
    <li><a href="#">The Dark Knight</a></li>
    <li><a href="#">Ausiello TV</a></li>
    <li><a href="#">Hell's Kitchen</a></li>
    <li><a href="#">America's Got Talent</a></li>
    <li><a href="#">2008 Fall Movie Preview</a></li>
    <li><a href="#">Radiohead</a></li>
  </ul>
</div>

<style type="text/css" media="screen">
 
      body { font:12px/12px arial,helvetica,sans-serif; }
      
      a { text-decoration:none; }
      a:hover { text-decoration:underline; }
      
      ul.inlineRuled {
        list-style:none;
        margin:0;
        padding:0;
        overflow:hidden;
        _display:inline-block;
      }
      
      ul.inlineRuled li {
        float:left;
        padding:0 2em 0 1em;      /* padding-right = 2 x padding-left */
        margin-left:-1em;         /* margin-left = -1 x padding-left */
        border-left:1px solid #ccc;
        white-space: nowrap;
      }

      ul.inlineRuledRight {
        list-style:none;
        margin:0;
        padding:0;
        overflow:hidden;
        _display:inline-block;
      }
      
      ul.inlineRuledRight li {
        float:right;
        padding:0 1em 0 2em;      /* padding-right = 2 x padding-left */
        margin-right:-1em;         /* margin-left = -1 x padding-left */
        border-right:1px solid #ccc;
        white-space: nowrap;
      }

      /* Decoration */
      #footerNav { font-weight:bold; }
      #footerNav #navLabel { float:left; text-transform:uppercase; width:160px; }
      #footerNav ul.inlineRuled li { margin-bottom:3px; } /* used to increase the line-height without increasing the pipe height */
      #footerNav ul.inlineRuled { margin-bottom:-3px; } /* removes the last bump for better vertical-alignment */

      #footerNav2 { font-weight:bold; }
      #footerNav2 ul.inlineRuled li { margin-bottom:3px; } /* used to increase the line-height without increasing the pipe height */
      #footerNav2 ul.inlineRuled { margin-bottom:-3px; } /* removes the last bump for better vertical-alignment */
    </style>


    <p class="description">An inline list that supports left-justification, line wrapping and no redundant pipes on the right</p>
    <div id="footerNav">
      <span id="navLabel">More from furf.com</span>
      <ul class="inlineRuled">
        <li><a href="#">American Idol</a></li>
        <li><a href="#">2008 Emmys</a></li>
        <li><a href="#">2009 Oscars</a></li>
        <li><a href="#">Dancing With The Stars</a></li>
        <li><a href="#">Robert Downey Jr.</a></li>
        <li><a href="#">Survivor</a></li>
        <li><a href="#">The Dark Knight</a></li>
        <li><a href="#">Ausiello TV</a></li>
        <li><a href="#">Hell's Kitchen</a></li>
        <li><a href="#">America's Got Talent</a></li>
        <li><a href="#">2008 Fall Movie Preview</a></li>
        <li><a href="#">Radiohead</a></li>
      </ul>
    </div>
    <p class="description">And now, the other way!</p>
    <div id="footerNav2">
      <ul class="inlineRuledRight">
        <li><a href="#">American Idol</a></li>
        <li><a href="#">2008 Emmys</a></li>
        <li><a href="#">2009 Oscars</a></li>
        <li><a href="#">Dancing With The Stars</a></li>
        <li><a href="#">Robert Downey Jr.</a></li>
        <li><a href="#">Survivor</a></li>
        <li><a href="#">The Dark Knight</a></li>
        <li><a href="#">Ausiello TV</a></li>
        <li><a href="#">Hell's Kitchen</a></li>
        <li><a href="#">America's Got Talent</a></li>
        <li><a href="#">2008 Fall Movie Preview</a></li>
        <li><a href="#">Radiohead</a></li>
      </ul>
    </div>

Pipe-Delimited Inline List

HTML