[英]Using a custom ordered list within a built-in ordered list
I made an ordered list with upper-alpha
, and then a custom list with a bracket after the number. 我用
upper-alpha
制成了一个有序列表,然后是一个自定义列表,在数字后加了一个括号。 Then I want to make a sublist using list-style-type: lower-roman
but it doesn't work. 然后,我想使用
list-style-type: lower-roman
制作一个子list-style-type: lower-roman
但是不起作用。 Is there a way to stop the double listing? 有没有办法阻止双重上市? Creating my
lower-roman
custom list doesn't look good. 创建我的
lower-roman
自定义列表看起来不太好。
Problem seemed to occur only when I use a built-in list, and then a custom list, and then a built-in list again. 仅当我使用内置列表,然后是自定义列表,然后再使用内置列表时,似乎才出现问题。
The CSS below doesn't work: 以下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;
}
However, custom lower-roman
seems to align roman to the left, instead of align right as in the list-style-type:lower-roman
: 但是,自定义的
lower-roman
似乎将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)". "
}
Sample HTML code to test with: 示例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>
You need to increase a bit the specifity of your selector where counter is inserted 您需要增加插入计数器的选择器的特异性
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>
or size your pseudo and reset 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.