使用 CSS 伪造自定义 ol 标签

Question

我想超越例如中建议的想法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 元素的填充），并且不能很好地发挥作用，例如，增加字体大小。

肯定有更好的方法吗？

Answer 1

如果您不想让文本换行，您可以使用 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>

使用 CSS 伪造自定义 ol 标签

Use CSS to fake a custom ol label

html

css

html-lists