Question

我使用计数器和伪：前选择器将十进制数添加到有序列表中。问题是计数器会影响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>

Answer 1

将:before伪absolute放在right: 100%（relative LI父级），而不是添加一些额外的空间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>

使用计数器的突出列表项目

1 个答案: