css - CSS: リストの箇条書きとフロートで余白が潰れないようにする

Question

<h3><img src="image.png" width="124" height="124" alt="" style="float: left;"/>This is a heading</h3>
This is text.
<ol>
<li>A list Item</a>
</li><li>Another list item</a>
</li><li><a href="http://www.facebook.com/TVN.cl">Another list item with a link</a>
</li>
</ol>

テキストコンテンツの左側に浮かせたい画像があります。順序付けされたリストと順序付けられていないリストの箇条書きがフロートで崩壊し、画像にマージンまたはパディングを追加しても効果がないことに気付きました。デフォルトの番号と箇条書きを保持しながら、リストの余白を維持するきれいな方法はありますか?

Answer 1

こんにちは、ol float プロパティを次のように定義できます

CSS

ol{
float:left;
}

Answer 2

ol タグに余白を付けて、右に移動させます

<h3><img src="image.png" width="124" height="124" alt="" style="float: left;"/>This is a heading</h3>
This is text.
<ol style="margin:0px 0px 0px 10px;">
<li>A list Item</a>
</li><li>Another list item</a>
</li><li><a href="http://www.facebook.com/TVN.cl">Another list item with a link</a>
</li>
</ol>

Answer 3

OLにfloatを与えるか、このCSSを使用できます：-

    ol {
margin:0 0 0 10px;
padding:0px;
float:left;

}

ol li a {
color:#000;
text-decoration:none;
}