在html中显示列表和子列表

Question

如何组织html代码（使用ol \ li ect。）来呈现这样的列表（带有子列表）

1. BLA-BLA-BLA

1.1. Bla-bla-bla.
1.2. Bla-bla-bla.
1.3. Bla-bla-bla:
  lalal - balalala;
  lalal - balalala;
  lalal - lalalla.
1.4. Blal-a lalslas
1.4.1. bklalala
1.4.2. sdsdsdsdsd

注意：这与我想要的不一样

Answer 1

ol标记表示有序列表（带数字）。

ul标记表示无序标记。

重叠ol列表允许此类演示：1.1.2

<ol>
  <li>BLA-BLA-BLA
    <ol>
      <li> Bla-bla-bla.</li>
      <li> Bla-bla-bla.</li>
      <li> Bla-bla-bla.
        <ul>
          <li>lalal - balalala;</li>
        </ul>
      </li>
    </ol>
  </li>
</ol>

Answer 2

你的问题在这里得到解答

Achieving sub numbering on ol items html

以下样式表编号将列表项目嵌套为“1”，“1.1”，“1.1.1”等。

OL { counter-reset: item }
OL>LI { display: block }
OL>LI:before { content: counters(item, ".") " "; counter-increment: item }

也许您可以编辑您的问题以避免重复问题。指着我刚刚告诉你的那个。

Answer 3

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

参考 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Html ordered list 1.1, 1.2 (Nested counters and scope) not working

Answer 4

试试这个例子：

    <ul class="list">
            <ol>
              <div class="white"><h3>White wines</h3></div>
              <li>Pinot Grigio ~
                   <ol>
                       <li>Cavit<span>( Venezia )$8</span><em>&nbsp;</em></li>
                       <li>Santa Margherita<span>( Valdadige) $17/$56</span><em>&nbsp;</em></li>
                       <li>Livio Felluga<span>( Alto adige ) $15/$54</span><em>&nbsp;</em></li>
                  </ol>
               </li>
            </ol>
                     <ol>
              <li>Lacryma Cristi ~
                   <ol>
                       <li>Mastroberardino<span>( Campania )$14/$50</span><em>&nbsp;</em></li>
                  </ol>
               </li>
            </ol>
               <ol>
              <li>Sauvinon Blanc ~
                     <ol>
                       <li>Fume blanc<span></span><em>&nbsp;</em></li>
                       <li>Kim crawford<span>( Malborough )$13/$42</span><em>&nbsp;</em></li>
                  </ol>
               </li>
            </ol>
           <ul>