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标签上加上一个边距并让它向右移动

<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 2

您可以像这样定义ol浮点属性

<强>的CSS

ol{
float:left;
}

Answer 3

将浮动提供给 OL ，或者您可以使用 CSS ： -

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

}

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