Question

我正在寻找创建一个按字母顺序排列的编号列表（这相当容易），但是我希望在数字中添加一个中断来添加字母（A，B，C等）但是请保持年代表数字。

我知道我自己可以进行编号并且没有问题，但是我想在添加项目时自动调整数字。希望有人可以告诉我如何在HTML中执行此操作。

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

A

空军一号
阿拉丁
神奇的蜘蛛侠

乙

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

C

Club Paradise

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的情况下完成：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

3 个答案: