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 由奈



ば〜ちゃるいんさにてぃ。

下血はあの後すっかりよくなりました。
心配してメールくださったお友達、ご心配おかけしました。
メッセとかでもイロイロ心配かけちゃったりして…。ゴメンナサイです。
ちょっとした一言でもかけてくれる嬉しさを久しぶりに味わいました。
ほんとありがとうでした。(返信はしたけど改めて…おほほ)

話は変わって。


今日ランキングに載っていたのでついつい見てしまいました。
ジェイケイのダンスをうまーく再現してて、ちょっちぐろいあのムシが
らぶりぃになっていました。w

本家はこちら↓


ちなみにジャミロクワイの曲で一番好きなのはCorner of the Earth。
comments (1) | trackbacks (0) | edit

posted by 由奈



絶賛○血中。

どうやら昨日の朝から、おなかが冷えたときのような痛みがありまして。
絶賛下血中でございます[:げっそり:]。おほほほほ。

拾い食いはしてないよ!

とりあえず友達からは「痔ですね。わかります」というメールが来ました。
違うし。ありえないし。こんにゃろう。[:イヤン:]

そのおなかが冷えちゃったときのような痛み以外は全くなにもなく。
だから病院にも行ってません(常に痛みがあるわけじゃないので)。
週明けにも治ってなかったら、病院いこっと。

季節の変わり目だからねー。
でも拾い食いはしてないよ。[:あっ:]
comments (1) | trackbacks (0) | edit

posted by 由奈


Information
そろそろブログのほうも、デザイン変えたいんだよネー。時間増えないかな…一日48時間とか(またか)。
(2008.06.17 Tuesday 16:07)
CALENDAR
NEW ENTRIES
CATEGORIES
RECOMMEND
【FINAL FANTASY REMIX】…
FINAL FANTASY REMIX

Music (発売日:2008-08-06)
RECENT COMMENTS
ARCHIVES
PROFILE
OTHER