<ol><li> 图像左对齐时位置奇数答案

【问题标题】：<ol><li> positions odd when image is aligned to the left<ol><li> 图像左对齐时位置奇数
【发布时间】：2012-04-15 13:25:37
【问题描述】：

http://www.brixwork.com/realtors/blog/marketing-promotion/combining-pdfs-online-for-a-comprehensive-presentation/

我在这篇博文中出现了两次<ol><li>s。第一个实例的格式很好，使用这个 CSS：

.post_content ul, .post_content ol {
    padding-left: 20px;
    margin: 0px 0px 20px 0px;
}

然后，在下方，在 PDF 图标图像（向左浮动）旁边，项目符号拉到左侧并且没有完全正确排列。我错过了什么？

【问题讨论】：

标签： css image html-lists alignment

【解决方案1】：

尝试添加

list-style-position: inside; 到您的 css 以获取 <ol>。

基本上，您的20px 填充会上升到包含元素的左边框并被浮动图片吃掉。将列表编号移动到包含元素“内部”，可以让它们的行为类似于它们周围的 <p> 文本。

这也将缩进您拥有的不受浮动影响的<ol>，因此您可能想要为此<ol>创建一个特殊类（或者去掉左边的填充，如果你只添加它使第一个<ol> 排队）。

【讨论】：

工作就像一个魅力！完美的。非常感谢。
list-style-position: outside; 是 默认值

【解决方案2】：

卡梅伦是对的 (+1)。这是最好的解决方案。

但是，有些人只是通过以下方式解决了这个问题：

隐藏数字/项目符号（即list-style:none;）
自己硬编码项目符号/数字

例子：

<ol style="list-style:none;">
  <li>1. Create PDF forms that can collect data</li>
  <li>2. Include multimedia (pictures, videos) from multiple sources into the PDF</li>
  <li>3. Sign PDFs</li>
  <li>4. And more!</li>
</ol>

个人不会用硬编码的方式来做，但它可以成为你腰带上的有用工具。

这是一篇很棒的文章，介绍如何使用 CSS 设置有序列表的数字样式，而无需像我上面概述的那样对数字进行硬编码：

Styling ordered list numbers

【讨论】：