如何在 HTML 中的编号列表中创建中断答案

【问题标题】：How to create a break in a numbered list in HTML如何在 HTML 中的编号列表中创建中断
【发布时间】：2017-05-21 00:35:44
【问题描述】：

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

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

基本上这就是我想要的样子：

一个

空军一号
阿拉丁
了不起的蜘蛛侠

回到未来
蝙蝠侠归来
比佛利山庄警察

俱乐部天堂

【问题讨论】：

我相信这会奏效：
这将是第二个列表。
为什么不用@rrd 的评论尝试以下（带空的li）<ol type="A"> <li></li> <ol> <li>2nd line</li> </ol> <li></li> </ol> 这应该可以工作

标签： html list numbered numbered-list

【解决方案1】：

下面的代码应该可以在没有 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>

【讨论】：

【解决方案2】：

试试这个

  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>

【讨论】：

【解决方案3】：

你可以使用ol标签的start属性，像这样：

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

【讨论】：