使用CSS伪造自定义ol标签

Question

我想超越例如中建议的想法。如何在有序列表中自定义数字？并使用可能复杂的HTML片段在有序列表中制作自己的标签。例如：

ol { padding-left: 10em }
li.item-cus-name {
list-style-type: none
}
span.item-name {
display: inline-block;
position: absolute; left: -19.8em;
width: 30em;
text-align: right;
}

<ol>
<li>First item in an ordered list</li>
<li>Second item</li>
<li class="item-cus-name"><span class="item-name">Label <em>ehags</em></span>Third</li>
<li class="item-cus-name"><span class="item-name">c.</span>Fourth</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
</ol>

我想做的是让<span>元素代替通常的标签，标签文本向左扩展(当通常的编号达到两位数时就会发生这种情况(。这种解决方案非常脆弱：

• 如果我有一个超长标签溢出了我设置的宽度，它会包装，这是我不想要的
• 使用absolute定位所需的确切位置需要不断修改(例如，在示例中更改ol元素的填充(，并且在增加字体大小时效果不佳

肯定有更好的方法吗？

Answer 1

如果不希望文本换行，可以使用white-space:nowrap。。。并将"；标签"；绝对需要将CCD_ 5定位在CCD_。

如果我们总是告诉标签是100%right，那么标签和li之间的间距只是标准裕度的问题。

ol {
padding-left: 10em
}
li {
position: relative;
}
li.item-cus-name {
list-style-type: none
}
span.item-name {
position: absolute;
right: 100%;
white-space: nowrap;
margin-right: .4em; /* adjust to your requirements */
}

<ol>
<li>First item in an ordered list</li>
<li>Second item</li>
<li class="item-cus-name"><span class="item-name">Label <em>ehags.</em></span>Third</li>
<li class="item-cus-name"><span class="item-name">c.</span>Fourth</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
</ol>