gpt4 book ai didi

html - 使用计数器的 Outdent 列表项

转载 作者:行者123 更新时间:2023-11-28 01:08:11 26 4
gpt4 key购买 nike

我正在使用计数器和伪:之前选择器将十进制数添加到有序列表中。问题是计数器影响了 li 的段落,而不是它缩进的元素编号。

有谁知道我怎样才能减少计数器的缩进,使剩余的段落不会流到左边距?

<html>
<head>
<style>
ol.lvl1 > li:before {
content: "16."counter(chapter);
margin-right: 20px;
}
ol.lvl1 > li {
display: block;
counter-increment: chapter;
}
</style>
</head>
<body>
<h1>16 Bacon Ipsum</h1>
<ol class="lvl1">
<li>Bacon ipsum dolor amet swine pig jerky leberkas flank, short ribs drumstick landjaeger frankfurter pork loin. Pancetta sausage pork loin, tenderloin cupim ham kevin brisket. Doner turkey cupim salami, landjaeger picanha pork chop short ribs ball tip:
<ol type = "a">
<li>Turkey short ribs alcatra, pancetta pastrami capicola spare ribs. Meatball short loin salami kielbasa filet mignon bacon ball tip turducken.</li>
<li>Jowl filet mignon picanha short loin:
<ol type ="i">
<li>Pig shankle prosciutto, shoulder chuck jowl frankfurter alcatra sirloin flank brisket</li>
<li>Sausage andouille biltong tri-tip short loin cupim ground round tail strip steak sirloin flank swine pork belly chicken</li>
</ol>
</li>
<li>Ham flank cupim ham hock boudin andouille venison pig prosciutto tail filet mignon jowl. Rump pastrami leberkas ball tip chicken bresaola, prosciutto turkey beef andouille venison ham tri-tip.</li>
</ol>
</li>
<li>The Employee may terminate the Employment by giving the Employer the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
<li>The Employer may terminate the Employment by giving the Employee the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
</ol>

<h1>17 Turkey</h2>
</body>

sample flow of paragraph

最佳答案

:beforeabsolute 定位在 right: 100% (relative LI parent),比添加一些额外的空间你可以做 margin: 10px;

ol.lvl1 > li:before {
content: "16."counter(chapter);
position: absolute;
right:100%;
margin-right:10px;
}
ol.lvl1 > li {
position:relative;
display: block;
counter-increment: chapter;
}
<h2>16 Bacon Ipsum</h2>
<ol class="lvl1">
<li>Bacon ipsum dolor amet swine pig jerky leberkas flank, short ribs drumstick landjaeger frankfurter pork loin. Pancetta sausage pork loin, tenderloin cupim ham kevin brisket. Doner turkey cupim salami, landjaeger picanha pork chop short ribs ball tip:
<ol type = "a">
<li>Turkey short ribs alcatra, pancetta pastrami capicola spare ribs. Meatball short loin salami kielbasa filet mignon bacon ball tip turducken.</li>
<li>Jowl filet mignon picanha short loin:
<ol type ="i">
<li>Pig shankle prosciutto, shoulder chuck jowl frankfurter alcatra sirloin flank brisket</li>
<li>Sausage andouille biltong tri-tip short loin cupim ground round tail strip steak sirloin flank swine pork belly chicken</li>
</ol>
</li>
<li>Ham flank cupim ham hock boudin andouille venison pig prosciutto tail filet mignon jowl. Rump pastrami leberkas ball tip chicken bresaola, prosciutto turkey beef andouille venison ham tri-tip.</li>
</ol>
</li>
<li>The Employee may terminate the Employment by giving the Employer the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
<li>The Employer may terminate the Employment by giving the Employee the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
</ol>

关于html - 使用计数器的 Outdent 列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38820432/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com