为什么我的CSS有序列表会忽略保证金？

Question

屏幕截图：

图片具有float:left属性。如您所见，有序列表的数字距离左侧太远，但在margin-left:20px标记中添加<ol>无效。 （顺便说一句，也没有为<li>添加它，但无论如何这都是不好的做法。）

如何将我的<ol>移到右边？

Answer 1

也许您可以使用position:relative向右移动列表？

http://jsfiddle.net/L6Lhtu2m/

ol {
    position:relative;
    left:20px;
}

Answer 2

您可以使用list-style-position属性控制项目符号的放置。试试这个：

ol li {
    list-style-position: inside;
}

检查演示程序的工作原理：

＆＃13;

＆＃13;

.fixed ol li {
    list-style-position: inside;
}

＆＃13;

<div class="demo" style="float: left; margin-right: 20px;">
    <h3>Without list-style-position</h3>
    <img src="http://lorempixel.com/100/100/food/2" style="float: left" />
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</div>

<div class="fixed" style="float: left">
    <h3>With list-style-position</h3>
    <img src="http://lorempixel.com/100/100/food/2" style="float: left" />
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我发现margin-left毕竟有用，但我必须添加图片的宽度，所以不是

margin-left:20px;

而是

margin-left:430px; /* 410px image width + 20px right margin

感谢所有其他答案。