結論から書くと次の通り

HTML

<ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
</ul>

CSS

ul {font-size:0}
ul li{
font-size:10px;
display:inline-block;
text-align:center;
vertical-align:middle;
}

display:inline-blockで横並びメニューを表現すると、
HTMLのマークアップの問題でメニューの間に1文字分の空白ができてしまいます。

上の方法では、font-sizeを0にして幅をなくす方法で対処しています。

このほかにも次のような方法があるようです。

可読性のためのスペースをコメントアウトする方法

<ul><!--
    --><li><a href="#">item1</a></li><!--
    --><li><a href="#">item2</a></li><!--
    --><li><a href="#">item3</a></li><!--
    --><li><a href="#">item4</a></li>
</ul>

CSSセレクタでDOMみたいにテキストノード指定ができると綺麗なんだけどな～。。。