2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(HTML/CSS)の記事

list-style-imageで指定した画像がちょっとズレるので修正してみた



CSSで <ul> タグに list-style-image で指定したリストアイコンと、 <li> タグのテキストの上下がずれて表示されるので修正してみました。

このズレはよくあることのようで定番の解決策があるようです。

結論から言えば、list-style-image でリストアイコンを指定するのではなくて、 list-style-type:none でリストアイコンを全て非表示にしちゃった上で、リストアイコンは背景画像として表示し、<li> は padding: 0 0 0 15px とかでずらして表示させる、というのが定番のテクニックのようです。

参考リンク:list-style-imageでリストイメージがズレます・・。| Yahoo! 知恵袋

もともとずれていた時の CSS はこんな感じでした。

ul {
  list-style-image: url("images/tweet_icon.png");
  margin-left: 40px;
}

li {
  /* なにも指定なし */
}

この CSS を適用した場合のズレがこちら。



そこで、定番テクニックどおり、<ul> を、

ul {
  list-style-type:none;
}

でリストアイコンを非表示にして、<li> に、

li {
  background:url("images/tweet_icon.png") left no-repeat;
  padding: 10px 0 10px 30px;
}

で、背景画像を指定し、padding でずらしました。

背景画像に変えた CSS を適用した場合の表示がこちら。



おー、なおった。

けど・・。

リストアイコン(背景)が真ん中だし。

上揃いにしたいということで、<li> の CSS に、「top」を追加して、

li {
  background:url("images/tweet_icon.png") top left no-repeat;
  padding: 10px 0 10px 30px;
}

こうしてみたら、



もとに戻った(;_;)。

これは、padding の上下を設定しているせいだと思われ、padding の上下を 0px にすると、



今度はつまった(;_;)。

なんか、CSS って面倒くさい。

ってことで、窮屈なのはあんまりなので、とりあえず、



で、お茶を濁しておこうと思います。

でわでわ。






この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.