リスト要素にlist-styleと背景色を指定する際の問題点

云わば、先日投稿したスタイル初期化したリスト要素にlist-styleを指定するときの注意から派生した問題です。

スタイル初期化したリスト要素にlist-styleを指定するときの注意の簡単なおさらい

  1. スタイル初期化したulにただlist-styleを指定しても行頭記号(・とか、1とか、■とか)が出ない
  2. 方法その1「list-style-positionをinsideに指定する」
    問題点:リストが2行以上になったときに先頭がそろわない。
  3. 方法その2「margin-leftを指定する」
    個人的おすすめの方法。

リスト要素にlist-styleと背景色を指定する際、行頭記号が背景色部分に含まれない

実現したいデザイン

実現したいデザイン

結果

コーディングした結果

なみに上のCSSは、

ul {
	margin-left: 25px;
	list-style: disc;
}
ul li {
	background: #ccc;
	padding: 5px;
	margin-bottom: 5px;
}

となっております。
まあ、左にマージンしてますから当然っちゃあ当然なんですが…。

解決策として第一に考えたのが、background-colorをulに指定して、liにborder-bottomで区切り線を入れたらどうか、です。

ul {
	background: #ccc;
	list-style: disc;
}
ul li {
	margin-left: 25px;
	padding: 5px;
	border-bottom: 5px solid #fff;
}

結果
解決策案その1
アウト。

第二の解決策。
リスト行頭記号(・とか、1とか、■とか)を画像にしたらどうか、です。

ul {
}
ul li {
	padding: 5px 5px 5px 25px;
	margin-bottom: 5px;
	background: #ccc url(img/list.gif) no-repeat 12px 10px;
}

解決策案その2
成功!

ちなみに、

ul {
	background: #ccc;
}
ul li {
	padding: 5px 5px 5px 25px;
	background: url(img/list.gif) no-repeat 12px 10px;
	border-bottom: 5px solid #fff;
}

これでも同様な結果です。

しかし、画像にするというのは、list-style使わないっていうことですから、結局問題解決してないんですよね。

なにかうまい方法はないもんでしょうかねぇ。
例えば、これが絶対2行にならないというのならlist-style-positionをinsideにすることで解決なんですが…。
list-style-positionをinsideにした場合

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA