Элементы списка Outdent List с использованием счетчиков

Я использую счетчики и псевдо: перед тем, как селектор добавит десятичные числа в упорядоченный список. Проблема заключается в том, что счетчики влияют на абзац li, а не на его изнашиваемый номер позиции.Элементы списка Outdent List с использованием счетчиков

Кто-нибудь знает, как я мог бы выдержать счетчик, чтобы оставшийся абзац не переместился в левое поле?

<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>

источник

2016-08-08 sansSpoon

Это может помочь: http: // stackoverflow. com/a/37825241/3597276 –

Вышеупомянутая проблема будет устранена. –

Установите :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>

источник

2016-08-08 02:43:53

Это сработало, спасибо большое! – sansSpoon

@sansSpoon добро пожаловать! –

Элементы списка Outdent List с использованием счетчиков

ответ

Смежные вопросы