为什么我的CSS有序列表忽略了margin？

Question

截图： 该图片具有“float:left”属性。如您所见，有序列表的数字太靠左了，但是将“margin-left:20px”添加到“

”标记上并没有帮助。（顺便说一句，将其添加到“
1. ”中也没有帮助，但那样做是不好的实践。）
   
   我该如何将我的“
   ”移到右侧？

- stevenvh

---

你尝试过添加 padding-left 吗？ - Stickers

Answer 1

你可以使用list-style-position属性来控制列表项的位置。试试这个方法：

list-style-position: inside;

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

请查看演示以了解其工作原理:

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

- dfsq

---

谢谢，但那只是缩进第一行以为编号腾出位置。我想让整个<li>向右移动更多。 - stevenvh

你能添加HTML结构和样式吗？或者更好地创建一个简单的演示。 - dfsq

Answer 2

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

http://jsfiddle.net/L6Lhtu2m/

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

- TreeTree

---

差不多了！我还得加上 padding-right:20px;，否则文本会移动到页面外面。谢谢。 - stevenvh

你能分享一下那个修复的 JSFiddle 吗？我无法仅通过填充来防止文本移动。我很好奇你是如何做到的。 - TreeTree

我得弄清楚这个琐事，看看我能做些什么。与此同时，我所说的页面是一个固定宽度的div。希望对你有帮助。 - stevenvh

Answer 3

我发现margin-left最终起作用了，但是我必须加上图片的宽度，所以不是

margin-left:20px;

但是相反

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

感谢所有其他答案。

- stevenvh