【Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く】【CSS】list-style-type,imageを横並べにしたい!【志摩嶋エイジ】

東方二次ゲームメインからオリジナル・企業系や漫画へ。TRPGやサバゲのアナログライクも

Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【CSS】list-style-type,imageを横並べにしたい!【志摩嶋エイジ】

若干ハマってイラッ★としたので、備忘録に。
この問題、次も起こりそうで非常にアレ。

list-style-type(image)で指定したシンボルが表示されない


以下のコードをご覧ください。

1.<li style="list-style-image:url('○○.jpg');float:left">リスト1</li>
2.<li style="list-style-image:url('○○.jpg')">リスト2</li>

これは、「1.リストのシンボルに画像つけて位置を左に固定してね」「2.リストのシンボルに画像つけてね」って命令なんですが、これをそのままやると画像がないままに表示されることがあります。

と言うのも、この面倒くさい事をやってるのがリストの特性なんですね。細かいことはリファレンス参照のことで。
具体的に言うとこういう事です。非常に分かりやすい!
より細かい話はこちらにあります(Yahoo!知恵袋注意)

応用として、inline-blockを使う方法があります。
ここまでやって使う事があるのかどうかはスペースを気にしない限り微妙なところですが、block-inlineの参考までに。

追記

もっといい方法があったみたいです(okwave注意)
これはなかなか考えた!

たまにはdl,dtの事を思い出してあげて下さい……
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。