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

Screenshot:

截图：

The image has a float:left attribute. As you can see the numbers for the ordered lists are too far to the left, but adding a margin-left:20px to the <ol> tag doesn't help. (Neither does adding it for the <li>s, by the way, but that would be bad practice anyway.)

该图像具有float：left属性。正如您所看到的那样，有序列表的数字距离左侧太远，但是向

标记添加margin-left：20px并没有帮助。 （顺便说一句，也没有为
1. 添加它，但无论如何这都是不好的做法。）

2. 添加它，但无论如何这都是不好的做法。）

How can I move my <ol> to the right?

如何将我的

移动到右边？

3 个解决方案

#1

Perhaps you can move the list to the right using position:relative?

也许您可以使用position：relative将列表移动到右侧？

http://jsfiddle.net/L6Lhtu2m/

http://jsfiddle.net/L6Lhtu2m/

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

#2

You can control placement of bullet items with list-style-position property. Try this:

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

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

Check the demo for how it works:

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

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

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

#3

I found margin-left works after all, but I have to add the image's width, so not

毕竟我发现了左边缘的作品，但是我必须添加图像的宽度，所以不是

margin-left:20px;

but rather

反而

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

Thanks for the other answers, all.

谢谢你的其他答案。