Centered nav list with extra spacers

by audetwebdesign

HTML

<div id="navigation">
<ul class="navigation">
  <li class="first">
    <a href="#" title="Home Page">Home</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">About&ensp;us</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">What&ensp;we&ensp;cover</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">Monitoring&ensp;agencies</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">Publishers</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">News</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">Contact&ensp;us</a>
  </li>
</ul>
</div>

CSS

#navigation {
    padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
    display: table;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation ul li {
    display: table-cell;
    text-align: center;
    width: 1%; /* force cell to shrink-to-fit text */
    outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
    width: 10%; /* force spacers to take up a lot of space */
    outline: none;
}

#navigation ul li a {
    white-space: pre;
}