Yuna's Tedious Talk

日々思ったことをつらつらと書いてます。


CSS リストを横並べにする際に起きる隙間。

仕事です。
最近仕事しかしてない気がします。
昨日一昨日と会社にお泊まりです。
ひー。

というわけで(どういうわけで?)忘れないように覚え書き。
前調べたはずなのにいっつも忘れちゃうからさー。

■CSSでリストを横並べにした時の隙間をうめる方法。■
リスト形式
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

とすると、たいていは

  • テキスト

  • テキスト

  • テキスト


となるわけですが(↑の場合、このブログのスタイルシートで矢印の画像が文頭に出てると思います、通常は・(中丸)です)、リストを駆使してよくパンくずを作ったりグローバルメニューを作ったりするわけですね。それってたいてい横並びだったりするわけなので、
  display:inline;
を使って横並びにするのですが、今回それを使っていたらどうも画像に隙間があいている。なぜだろう?うーん。

と調べてみると、

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

のように、LI要素毎に改行していると、半角1文字分空いてしまうという。
仕様ですかそうですか。ちなみにIEだとあかないです。MSマジック(本来は空くのが仕様なのだからやっぱバグ)ですかね…。

というわけで、解決策としては、改行を入れずにソースを書くタイプにする↓か、

<ul>
<li>テキスト</li><!--
--><li>テキスト</li><!--
--><li>テキスト</li><!--
--></ul>


もしくは下記の記述でごり押し。

ul{
padding-left:0.5em;
}

ul li{
margin-left:-0.5em;
display:inline;
}


改行入れずにコメント記述で対処するとなるとちょっと見た目がよろしくないですな…。かといって文字をインデントで処理するのもいいんだか悪いんだか。でもスマートな方法とるなら後者だよねぇ。

こんな基本もわかってないなんて!なんて言われてしまいそうですが…前調べてもうカンペキーなんて思ってたことでもこうやってメモっておかないとまた忘れてしまって調べなおしたりするはめに。

今やってるリニューアル作業は、多分年明け公開かなぁ。できたらミクシあたりで報告するかもです。頑張るぞ−。
comments (2) | trackbacks (0) | edit

posted by 由奈