下記のような指定でリストをinlineで並べ、li要素毎に改行すると、半角スペース分の余白ができてしまう。

ul {
	text-align: center;
}
ul li {
	display: inline;
}
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/service/">サービス案内</a></li>
<li><a href="/company/">会社情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>

んで、この余白を埋めるための方法をいくつか紹介しますだ。


一行で書く

<ul>
<li><a href="/">トップページ</a></li><li><a href="/service/">サービス案内</a></li><li><a href="/company/">会社情報</a></li><li><a href="/contact/">お問い合わせ</a></li>
</ul>

改行を入れなければ、半角スペースは生じないので、OKってばOKですが、見難いのでおススメは出来ません。

コメントを使う

<ul>
<li><a href="/">トップページ</a></li><!--
--><li><a href="/service/">サービス案内</a></li><!--
--><li><a href="/company/">会社情報</a></li><!--
--><li><a href="/contact/">お問い合わせ</a></li>
</ul>

こんな感じでコメントを使うことで、半角スペースが生じなくなります。
この方法が一番見かける気がします。

「>」の前で改行する

<ul>
<li><a href="/">トップページ</a></li
><li><a href="/service/">サービス案内</a></li
><li><a href="/company/">会社情報</a></li
><li><a href="/contact/">お問い合わせ</a></li>
</ul>

「>」の前じゃなくてもいいんですけど、こんな風にすることでも半角スペースが生じなくなります。

半角スペースを利用する

最後は、特にどうこうするって訳じゃなくて、CSS側でこのスペース分だけ、調整してしまう方法。
paddingとmarginを上手い具合に調整してあわせます。
(X)HTMLソースはコレが一番っすね。

なんとなく、意外と知らない人が多いかもって思ったので上げました。
別の人が編集して、知らずにコメント消されたりって事も無きにしも非ずなので、覚えておくと良いかと思うだす。

いまさらですが追記:09年07月07日

display: table-cell;を入れる事で解決する方法も有ります。

ul {
	text-align: center;
}
ul li {
	display: table-cell;
	/display: inline;
	/zoom: 1;
}

ただ、この方法だと、テーブルっぽくなってるので、marginの指定がきかなくなります。
それに対応するにはpaddingプロパティで調整する事になるので、デザインに寄っては利用できないかも知れません。