html - 如何在 HTML 中的编号列表中创建中断

Question

我希望创建一个按字母顺序排列的编号列表（这很容易），但是我希望在数字中添加一个中断，以便添加字母（A、B、C 等）但保持数字的年表.

我知道我可以自己进行编号并且没有问题，但是我希望数字在我添加项目时自动调整。希望有人能告诉我如何在 HTML 中做到这一点。

基本上这就是我希望它看起来的样子：

一个

1. 空军一号
2. 阿拉丁
3. 神奇蜘蛛侠

乙

4. 回到未来
5. 蝙蝠侠归来
6. 比佛利山警察

C

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>