Css li文本下的ol数字

我正在尝试找出如何在我的ol中设置项目的样式。我的目标是最终结果是让ol水平，左下的数字在li文本下对齐。

最终结果的外观示例：
项目项目

---

12345这里是使用伪元素定位自定义计数器来实现此设计的一种方法

您可以从有序或无序列表开始：

<ol class="list">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
    <li>Durian</li>
</ol>

定义自定义计数器并将其放置在伪元素

li:after

中

我浮动列表项以获得水平菜单，但也可以使用内联块

请参见演示：

向后兼容性

这里的限制性设计因素是自定义计数器，它受IE8的支持：

旧浏览器的替代方案 对于不支持计数器和生成内容的旧浏览器，您可以尝试以下方法

您需要在内容列表中添加包装器元素：

<ol class="list">
    <li><p>Apples</p></li>
    <li><p>Bananas</p></li>
    <li><p>Cherries</p></li>
    <li><p>Durians</p></li>
</ol>

在这种情况下，您可以

列出样式位置：inside

，然后通过指定20px的行高和20px的顶部填充来定义两行文本区域。您还需要在列表项上指定宽度

然后设置内包装的高度，然后使用绝对定位将底部偏移20px

这需要更多的工作，由于宽度和高度长度的限制， 但这是一个概念的证明

---

请参见演示：

我在li中使用了一个span来将文本定位在元素上方。您可能需要调整CSS，以便在实际环境中更好地工作

HTML

<ol class="example">
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
</ol>

<ol>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
</ol>

---

这是我的方式，使用CSS 2.x和跨浏览器：）

HTML

<ol class="example">
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
</ol>

<ol>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
</ol>

---

工作：

文本是否总是单个单词？文本可以换行成两行或更多行吗？我很想看看这个问题的答案。我肯定有解决办法，但好奇的是，如果有更好的解决办法，物品目前是如何放置的？这有关系吗？到目前为止你都尝试了什么？这正是我所创造的，哈哈，有什么兼容性问题吗？我特别怀疑IE，它在8岁和8岁以前的旧版本IE上不太管用，从IE8到更高版本的IE似乎都管用。非常优雅的解决方案，如果你不需要担心IE7。我想说的是，根本不用担心IE7。你和我的解决方案似乎相似。除非您使用pseudo来清除浮动。我们真的需要它们吗？事实上，既然你提到了它，你需要在OL之后添加psudo元素（我已经编辑了我的帖子）。这是因为块级元素仍将在OL之后浮动。看到了吗？抓住你了！现在看起来不错。

ol li {
    position:relative;
    min-width:100px;
    padding:30px 0 0;
    float:left;
}

ol li span {
    position:absolute;
    left:-30px;
    top:0px;
}