ぬこのおなかの忘備録: [HTML/CSS]画像の回り込み設定とリストタグ

2011年4月18日

画像を表示し、文字を右側に回りこませえて表示する方法を試していたところ、リストタグ<ul>で困った症状に遭遇。
症状
下記のようにリストの"・"が画像にかぶってしまってしまう。

その際のHTMLソースは以下。

<html>
<img style="float:left;" src="WS000032.JPG" />
<p>abcdefg</p>
<ul>
<li>hhhhhhhhhh</li>
<li>iiiiiiiiii</li>
</ul>
</html>

解決方法
<p>タグの文章の表示開始位置が釈然としないが、以下のように改善できた。

HTMLソースは以下。

<html>
<img style="margin-right:20; float:left;" src="WS000032.JPG" />
<p>abcdefg</p>
<ul>
<li>hhhhhhhhhh</li>
<li>iiiiiiiiii</li>
</ul>
</html>

要は画像の右に、マージンを設けることで、かぶりを無くした。

以上

ぬこのおなかの忘備録