実現したいこと
float: left を設定した画像にul、olなどのリストが回り込んだ場合に画像に右マージンを設定してもリストマーカー部分がマージンに食い込んで、指定した余白が反映されません。
この現象の解消方法をご存知の方がいらっしゃれば、ご教示いただけないでしょうか。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 img { 8 float:left; 9 margin-right:20px; 10 } 11 ol{ 12 padding-left:2em; 13 } 14 </style> 15</head> 16<body> 17 <img src="https://placehold.jp/150x150.png" alt=""> 18 <ol> 19 <li>リストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト</li> 20 <li>リスト</li> 21 <li>リスト</li> 22 <li>リスト</li> 23 <li>リストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト</li> 24 <li>リスト</li> 25 <li>リスト</li> 26 <li>リスト</li> 27 <li>リスト</li> 28 <li>リスト</li> 29 </ol> 30</body> 31</html>
こちらもご確認ください。
https://jsbin.com/pazazim/2/edit?html,css,output
試したこと
ol に overflow:hidden; を設定すれば、マージンは反映されますが、リストの回り込みが解除されてしまいます。リストの回り込みをそのままに解決する方法がないかを探しています。
どうぞ、よろしくお願いいたします。
0 コメント