css - HTML5/CSS : aligning labels to the left of list items

Question

我正在尝试创建一个有序列表，其中列表中的某些元素在其右侧有标签。标签应该与它们相关的列表项完美对齐。

像这样:

(label)   1. first item
          2. second item
(label)   3. sub list: (a) first sub item
                       (b) second sub item
                       (c) third sub item
(label)   4. fourth item
          ...

我首先想到的是表格，但表格内的列表在 HTML 中是无效的。

我想到的第二件事是在一个 DIV 中创建一个列表，在另一个 DIV 中创建标签，但我无法将每个标签与相关列表项对齐。

我想到的第三件事是根本不使用列表，只写数字，但断线没有正确缩进。

我能想出的唯一解决方案是一个表(或一组 DIV)，其中每个元素都是单独的，并且单独设置了 START 属性。这显然是一个非常糟糕的解决方案，但至少看起来还不错。

还有其他解决方案吗？

Answer 1

Demo Fiddle

潜在的 CSS 解决方案可能如下所示 - 您需要根据自己的用途进行编辑，但应为您提供一个起点:

HTML

<ol>
    <li data-label='label1'>Item 1</li>
    <li data-label='label2'>Item 2</li>
    <li data-label='label3'>Item 3</li>
    <li data-label='label4'>Item 4</li>
    <li data-label='label5'>Item 5</li>
</ol>

CSS

ul{
    position:relative;
}
li{
    margin-left:20px;
}
li:before{
    content:attr(data-label);
    position:absolute;
    left:0px;
}