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



Comments

由奈 :: 2009/11/06 13:11 PM
mikanさま>
コメントありがとうございます♪
最近ブログ更新をサボっていて、かなり前の記事になってしまったのですが、検索からいらっしゃったとのことで、読んで頂きありがとうございます〜!
floatは私も以前は使っていたのですが、結局float解除の記述も必要(Clearfixなどを使えばいいのかもですが)になったりで、周りでよく使われるdisplayのほうを、今では使っていますですー。(大手企業サイトなど、色々ソースを見させて頂いて勉強したりすることもあります)

私もまだまだCSSは勉強中なので、知識が足りない部分も沢山あるので、こういったコメントはとってもうれしいです。参考になります♪

どうもありがとうございました^^
mikan :: 2009/10/30 10:19 AM
こんにちわ。googleから来ました。
自分もグローバルナビ等をリスト横並びで置くのですが、大体置くときはfloatを使っています。
displayを普段使っておらず使いどころを良く知らないせいもあるのですが
floatではなくdisplayを使う事が一般的なのでしょうか??
個人的にはfloatで特に意識せずに隙間も無くなるのでこちらのほうが楽なのではないのかな?と思いました。
過去の日記を読んでいないので的外れな質問でしたらごめんなさい[:イタタ:]

Comment Form

 
emoji:
com_End


Trackbacks

トラックバックはありません。

tb_End

CALENDAR
NEW ENTRIES
CATEGORIES
RECOMMEND
【FINAL FANTASY REMIX】…
FINAL FANTASY REMIX

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