2011年4月18日

HTML - 画像の回り込み設定とリストタグ

画像を表示し、文字を右側に回りこませえて表示する方法を試していたところ、リストタグ<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>

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

0 件のコメント:

コメントを投稿