<p>My HTML is as follows:</p>

<pre><code>&lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="./"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/About"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And my css:</p>

<pre><code>#nav {
    display: inline;
}
</code></pre>

<p>However the whitespace between the li's shows up. I can remove the whitespace by collapsing them like so:</p>

<pre><code>&lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="./"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/About"&gt;About&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>But this is being maintained largely by hand and I was wondering if there was a cleaner way of doing it.</p>

Several options here, first I'll give you my normal practice when creating inline lists:
```
```
<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>
```
```
Then the CSS to make it function as you intend:
```
```
#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }
```
```
Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */
If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:
```
```
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
```
```
Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.