title: Left and Right aligning of a list on the same line in sequence
body: <p>Trying to use a list with 5 (or more items) gotten the code to work but trying to get it to work as the desired image shows.</p>
  
  <p>I'm very new at css so please bear with me.  thanks</p>
  
  <p>Any help would be appreciated.</p>
  
  <pre>
  Desired:
  
      Item 1                                     Item 2  Item 3  Item 4  Item 5
  
  Currently: 
  
      Item 1                                     Item 5  Item 4  Item 3  Item 2
  </pre>
  
  <p>CSS</p>
  
  <pre><code>#navlist li
  {
  display: inline;
  }
  
  #navlist #right
  {
  float: right;
  margin-right: 10px;
  }
  
  #navlist li a
  {
  text-decoration: none;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="navcontainer"&gt;
  &lt;ul id="navlist"&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li id="right"&gt;Item 2&lt;/li&gt;
      &lt;li id="right"&gt;Item 3&lt;/li&gt;
      &lt;li id="right"&gt;Item 4&lt;/li&gt;
      &lt;li id="right"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>