我使用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>
答案 0 :(得分:0)
您需要增加插入计数器的选择器的特定位置
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>