Как создать разрыв в нумерованном списке в HTML

Question

Я пытаюсь создать нумерованный список в алфавитном порядке (что довольно просто), однако я хочу добавить разрыв в числах для места добавления букв (A, B, C и т. Д.), Но сохранить хронологию чисел,

Я знаю, что могу выполнить нумерацию самостоятельно и без проблем, однако я хочу, чтобы числа автоматически корректировались при добавлении элементов. Надеюсь, кто-нибудь подскажет, как это сделать в HTML.

По сути, это то, что я хотел бы, чтобы это выглядело так:

1. Борт номер один
2. Aladdin
3. Удивительный человек паук

В

4. Назад в будущее
5. Бэтмен возвращается
6. Полицейский Беверли Хиллз

С

7. Клубный Рай

Answer 1

Вы можете использовать start атрибут ol тег, как это:

<h2>A</h2>
<ol>
  <li>Air Force One</li>
  <li>Aladdin</li>
  <li>Amazing Spider-Man</li>
</ol>

<h2>B</h2>
<ol start="4">
  <li>Back to the Future</li>
  <li>Batman Returns</li>
  <li>Beverly Hills Cop</li>
</ol>

<h2>C</h2>
<ol start="7">
  <li>Club Paradise</li>
</ol>

Answer 2

Следующий код должен сделать трюк без JS:

ol.start { 
    counter-reset: mycounter; 
}
ol.start li, ol.continue li {
    list-style: none;
}
ol.start li:before, ol.continue li:before { 
    content: counter(mycounter) ") "; 
    counter-increment: mycounter;
    position:relative;
    text-align: right;
    width:25px;
    display:block;
    float:left;
    left:-30px;
}

  <ol type="A">
    <li></li>
    <ol class='start'>
    <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
    </ol>
    <li></li>
    <ol  class='continue'>
    <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
    </ol>
      <li></li>
    <ol  class='continue'>
    <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
    </ol>
    </ol>

Answer 3

Попробуй это

  var entityAlpha = 65;
 $('li').each(function(i,e){
   if(i%3 === 0){
     $(this).css('position', 'relative');
     $(this).append('<span class="alpha">&#'+entityAlpha+';</span>');
     entityAlpha = entityAlpha+1;
   }
 });

/* Put your css in here */

ol li:nth-child(3n){
  margin-bottom:40px;
}
.alpha{
  left:-25px;
  top:-30px;
  position:absolute;
  font-weight: bold;
}

ol{
  margin-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ol>
       <li> Air Force One</li>
        <li>Aladdin</li>
        <li>Amazing Spider-Man</li>
        <li>Back to the Future</li>
        <li>Batman Returns</li>
        <li>Beverly Hills Cop</li>
        <li>Club Paradise</li>
    </ol>