Question

我使用upper-alpha创建了一个有序列表，然后是一个自定义列表，其后面有一个括号。然后我想使用list-style-type: lower-roman创建一个子列表，但它不起作用。有没有办法阻止双重上市？创建我的lower-roman自定义列表看起来不太好。

只有在我使用内置列表，然后是自定义列表，然后再使用内置列表时，才会出现问题。

下面的CSS不起作用：

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol{
    list-style-type: lower-roman;
}

但是，自定义lower-roman似乎将罗马左对齐，而不是像list-style-type:lower-roman中那样对齐：

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol {
    list-style-type: none;
    counter-reset: roman;
}
ol.listing li ol li ol> li:before {
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

示例用于测试的HTML代码：

<ol class="listing">
    <li>Beverage
        <ol>
            <li>Cold Beverage
                <ol>
                    <li>Apple Juice</li>
                    <li>Sky Juice</li>
                    <li>Milk</li>
                </ol>
            </li>
            <li>Hot Beverage
                <ol>
                    <li>Coffee</li>
                    <li>Tea</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Food</li>
</ol>

Answer 1

您需要增加插入计数器的选择器的特定位置

ol.listing> li >ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing> li >ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol{
    list-style-type: lower-roman;
}

<ol class="listing">
    <li>Beverage
        <ol>
            <li>Cold Beverage
                <ol>
                    <li>Apple Juice</li>
                    <li>Sky Juice</li>
                    <li>Milk</li>
                </ol>
            </li>
            <li>Hot Beverage
                <ol>
                    <li>Coffee</li>
                    <li>Tea</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Food</li>
</ol>

或调整伪大小并重置text-align：

ol.listing li ol li ol> li:before {
  width: 1.5em;/* size*/
  text-align: right;/* reset */
  display: inline-block;/* make it a box sizeable */
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol {
    list-style-type: none;
    counter-reset: roman;
}
ol.listing li ol li ol> li:before {
  width: 1.5em;
  text-align: right;
  display: inline-block;
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

<ol class="listing">
    <li>Beverage
        <ol>
            <li>Cold Beverage
                <ol>
                    <li>Apple Juice</li>
                    <li>Sky Juice</li>
                    <li>Milk</li>
                </ol>
            </li>
            <li>Hot Beverage
                <ol>
                    <li>Coffee</li>
                    <li>Tea</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Food</li>
</ol>

在内置有序列表中使用自定义有序列表

1 个答案: