Css 如何在内联排序列表中显示数字？

我有一份清单：

<ol>
    <li>Login</li>
    <li>Address</li>
    <li>Shipping</li>
</ol>

---

我不知道为什么会发生这种情况，但可以通过向左浮动而不是

display:inline

看

ol{
填充：20px；
列表样式类型：十进制；
}
欧利{
浮动：左；
利润率：0.10px；
填充：0 10px；
}

如果你不在乎旧版本的IE，你可以使用

---

否则，您应该手动指定数字（@Babiker的解决方案）或

float

您的

li

的（@Eric Fortis'解决方案）。

我已经通过以下方法解决了ol数字被左浮动元素推送的问题：

li {
    overflow:hidden;
    list-style-position: inside;
    display:block;
}
.number {
    display:list-item;
    position:absolute;
}
.first-item {
    float:left; 
    /* revise margin to your needs */       
    margin-left:35px;
}
.second-item {
    float:left;
}

给定以下DOM：

<ol id="playlist">

        <li>
            <div class="number"></div>
            <a class="first-item" href="#">click here</a>
            <div class="second-item">some detail</div>
        </li>
</ol>

一些细节

似乎也适用于内联块元素。

您可以尝试以下方法：

ol
{
/*列表将从25+1=26开始*/
/*如果要从1开始，请卸下25*/
计数器重置：列出项目25；
}
锂
{
显示：内联；
右侧填充：0.5em；
}
李：以前
{
内容：计数器（列表项）”；
反增量：列表项；
右侧填充：0.25em；
字体：斜体；
字体大小：粗体；
}

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

试着增加边距值，看看它是否有什么不同只是为了彻底，你试过10px以上吗？这是很不公平的，对于这样的布局，只有浮动中心动态浮动内容可能是不可能的。这不是一个真正的解决方案：当一个li足够长，可以开始包装时，整个事情又回到了传统的清单上。一个计数器需要与内联显示李。这是真棒的。。。比浮子好多了！我真不敢相信我做前端开发人员有多久了，还不知道这件事……：（这似乎不适用于IE11。所有列表项编号都是1。

<ol id="playlist">

        <li>
            <div class="number"></div>
            <a class="first-item" href="#">click here</a>
            <div class="second-item">some detail</div>
        </li>
</ol>