1

In my previous question, I've been using CSS to create auto generated list numbering for <li></li> tags. In another task, I need to create another list that will have title in between of the list as picture shown below.

Example

Above example can be achieve using below code

HTML

<ol class="main">
    <span class="title">Title</span>
    <li>
        Content
    </li>
    <li>
        Content
    </li>
    <span class="title">Title</span>
    <li>
        Content
    </li>
</ol>

CSS

ul {counter-reset:section}
li {margin:15px 0;text-align:justify}
li:before {counter-increment:section;content:""}
.main {list-style-position:inside;list-style-type:none;padding:0}
.main span {font-weight:700;text-decoration:underline}
.inner {padding:0}
.inner ul {counter-reset:section}
.inner ul > li:before {content:""}
ul {list-style-type:lower-alpha}

However, this code doesn't work in some browser like Opera. This is because in HTML 5, <span></span> tag can't be nested within element <ol></ol>.

jsFiddle that work in Firefox, Chrome and Internet Explorer.

4

2 回答 2

1

这是一个纯 CSS 版本，适用于 Chrome 26 和 FF 20（尚未在其他浏览器上测试）。与您之前的问题不同的是，您不需要每次都重置计数器。

/* Don't reset every time!!! */
/* ol.inner {counter-reset:section;} */

ol.inner li {counter-increment:section;}
ol.inner li:before {content: counters(section,"") ". ";}
于 2013-05-15T13:40:57.173 回答
0

您可以将内部嵌套<ol>在无序列表中并为每个列表分配一个起始位置：

<ul class="main">
  <li>Title Of Section
      <ol>
          <li>Content 1</li>
      </ol>
  </li>
  <li>Title Of Section
      <ol start="2">
          <li>Content 1</li>
          <li>Content 2</li>
          <li>Content 3</li>
      </ol>
  </li>
</ul>

我整理了一个快速小提琴，它使用 jquery 自动更新每个有序列表的 atart 位置。

于 2013-05-15T13:26:51.623 回答