li要素をdisplay: inline;で横に並べた場合、要素ごとにソースを改行したり、スペースがあると余白ができてしまいます。
この問題を解決するには、次の3通りの方法があります。
(1)li要素を1行にまとめて書く(XHTML)
<div id="globalnavi"> <ul> <li id="homenavi"><a href="<$MTBlogURL$>">home</a></li><li id="updateinfonavi"><a href="<$MTBlogURL$>updateinformation/">update information</a></li> </ul> </div>
(2)paddingとmarginで余白を調整する(CSS)
div#globalnavi li {
display: inline;
margin-right: 3px;
padding-left: 7px;
}
(3)コメントを利用する(XHTML)
<div id="globalnavi"> <ul> <li id="homenavi"><a href="<$MTBlogURL$>">home</a></li><!-- --><li id="updateinfonavi"><a href="<$MTBlogURL$>updateinformation/">update information</a></li> </ul> </div>
(1)と(3)の方法はスマートではないので、個人的には(2)の方法を使用しています。
