CSS:避免使用列表元素符号和 float 折叠边距

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>

我有一张图片要 float 在某些文本内容的左侧。我注意到有序列表和无序列表上的元素符号随 float 折叠，并且向图像添加边距或填充不会添加任何效果。有什么干净的方法可以在保留默认编号和元素符号的同时保持列表边距？

Answer 1

在你的 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>