Best way to manage whitespace between inline list items

Question

My HTML is as follows:

    
Home
    
About

        

Answer 1

Adopt non-XML-based HTML and omit </li>.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Then set the display property of the items to inline-block instead of inline.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Answer 2

The problem is the font size in the UL. Set it to 0 and it will disappear, but you don't want you actual text to be set so small, so then set your LI font size to whatever you want it to be.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>