使用CSS伪造自定义ol标签

如何解决使用CSS伪造自定义ol标签

我想超越例如How can you customize the numbers in an ordered list?，并使用可能复杂的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元素的填充），并且在例如增大尺寸方面效果不佳字体。

肯定有更好的方法吗？

解决方法

如果您不希望自动换行，可以使用white-space:nowrap ...，并且放置“标签”绝对需要将li放置在relative处。

如果我们总是告诉标签为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>