title: Right align and left align ul li elements in horizontal navigation bar
body: <p>I am coding a horizontal navigation bar for my site.
  The html is as follows:</p>
  
  <pre><code>        &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li class="special_text"&gt;&lt;a href="#"&gt;Hello1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Hello2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Hello3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>The css is as follows:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  body {
      background-color: white;
      margin: 15px auto;
      border: 1px solid black;
  }
  
  header {
  
  }
  
  ul {
      list-style: none;
      padding: 1em 0;
      border-bottom: 2px solid #61f231;
      border-top: 2px solid #61f231;
  }
  
  li {
      display: inline;
      padding: 0 1.5em;
      border-left: 2px solid #61f231;
  }
  
  li.special_text {
      font-size: 200%;
      font-weight: bold;
      color: black;
      font-family: "Arial Black";
  }
  
  li.special_text a {
      text-decoration: none;
  }
  </code></pre>
  
  <p>I would like to have some <code>&lt;li&gt;</code> elements aligned left while others align right.
  When I try to float the ones that I want left or right there is a problem with the vertical alignment (the elements are no longer vertically aligned within the <code>&lt;ul&gt;</code> element.</p>
  
  <p>Part of the problem arises from the fact that the first <code>&lt;li&gt;</code> element uses a different size font.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thank you</p>