HTML5/CSS:将标签对齐到列表项的左侧

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

演示小提琴

一个潜在的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;
}