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 浮点属性

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浮动，或者你可以使用这个CSS :-

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

}

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