Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

display: inline;の余白を解決する方法

li要素をdisplay: inline;で横に並べた場合、要素ごとにソースを改行したり、スペースがあると余白ができてしまいます。

/photo/li.jpg” width=”558″ height=”419″ alt=”li” title=”” class=”frame”>

この問題を解決するには、次の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)の方法を使用しています。