Question

我正在尝试使用列表进行以下安排：

1. a. TextA
   b. TextB
   c. TextC
2. Text2
   a. TextA

理想情况下，我不必为第一种情况制作单独的类或标记。问题是目前它看起来像这样：

1.
   a. TextA
   b. TextB
   c. TextC
2. Text2
   a. TextA

HTML code：

<ol>
    <li>
        <ol>
            <li>TextA</li>
            <li>TextB</li>
            <li>TextC</li>
        </ol>
    </li>
    <li>Text2
        <ol>
            <li>TextA</li>
        </ol>
    </li>
</ol>

是否可以使用CSS执行此操作？我们只需要以FF3为目标，所以我希望有一些高级的CSS选择器。然而，似乎要“检测”第一种情况，你必须看看ol标签之前的第一个列表项中是否有任何文本，我认为你不能用CSS做到这一点。

我还注意到有时候人们把嵌套的ol放在li标签下面而不是里面，但我发现外观没有任何区别。

提前致谢。

编辑：我没有提到对这个问题非常重要的事情。我需要将数字对齐而不是左对齐。我在另一个stackoverflow问题上找到了解决方案，我正在使用的CSS是：

li {
    margin-bottom: .5em;
    margin-left: 25px;
}

li:before {
    display: inline-block;
    content: counter(item) ".";
    counter-increment: item;
    width: 20px;
    margin-left: -23px;
}

最后7行使得列表的行为与我上面概述的相同，对不起给您带来了困惑！

Answer 1

当我copy and paste your html加入新文档时，我会得到所需的结果。如果在“1”之后有non-breaking space或类似内容，我只会在换行符上看到子列表。

Answer 2

好的，所以玩给出的例子。如果你从样式中删除最后7行，这个问题就会神奇地消失。

你提到这条线很重要，但我不确定为什么。删除似乎不会影响间距或编号 - 除非使其工作。

以下样式代码似乎给出了原始问题中的内容 - 包括“正确对齐” - 如果我仍然错了，请纠正我：

li {
  margin-bottom: .5em;
  margin-left: 25px;
}
ol ol li {list-style-type:lower-alpha;}

嵌套列表项样式（带有空容器列表项）

2 个答案: