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;
}

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

1 个答案:

Demo Fiddle