下記のような指定でリストを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プロパティで調整する事になるので、デザインに寄っては利用できないかも知れません。