Question

我正在研究我正在开发的在线课程的内容，并且需要包含大学指定的课程目标。每周，我都会有一个页面列出课程目标。使用OL和CSS列出目标，以创建UnitNum.1，UnitNum.2等形式的列表。我能够根据Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?的建议使其工作。

以下是我页面的一部分：

<html>
  <head>
    <title></title>
    <style type="text/css">
      .dottedlist {
         counter-reset: dottedlistcnt;
      }
      .dottedlist li {
         list-style-type: none;
      }
      .dottedlist li::before {
         counter-increment: dottedlistcnt;
         content: "1." counter(dottedlistcnt) " ";
      }
      .dottedlist li {
         list-style-position: outside;
      }
    </style>
  </head>

  <body>
    <ol class="dottedlist">
      <li>Identify the major constraints that impact Project Management: scope, time and cost. </li>
      <li>Differentiate between IT projects and other kinds of projects: skills; turnover rates; uniqueness and complexity; visualization; requirements gathering; changing requirements; technology changes; software testing; and training.</li>
      <li>Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. </li>
      <li>Discuss the influence of organizational structure on Project Management effectiveness. </li>
    </ol>

  </body>
</html>

渲染中的问题是文本环绕项目1.2和1.3并且低于编号，而我希望它与上面（每个）行的文本对齐。

此外，有没有人知道我是否可以参数化.dottedlist li ::之前的数字1，所以在我处理其他单位的其他页面上我可以简单地添加它？

Answer 1

这是不可能的，因为:before被放置在<{>} li内，而不在外面。

考虑使用JavaScript。这是一个基于jQuery的演示。你可以复制'n'paste'n'run它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4503825</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('ol.dottedlist').each(function(i, ol) {
                    $ol = $(ol);
                    $ol.children('li').each(function(i, li) {
                        $li = $(li);
                        var level = '1.' + ($li.index() + 1);
                        $li.prepend('<span>' + level + '</span>');
                    });
                });
            });
        </script>
        <style>
            ol.dottedlist {
                list-style-type: none;
            }
            ol.dottedlist li span {
                margin: 0 5px 0 -25px;
            }
        </style>
    </head>
    <body>
        <ol class="dottedlist">
            <li>Identify the major constraints that impact Project Management: scope, time and cost. </li>
            <li>Differentiate between IT projects and other kinds of projects: skills; turnover rates; uniqueness and complexity; visualization; requirements gathering; changing requirements; technology changes; software testing; and training.</li>
            <li>Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. </li>
            <li>Discuss the influence of organizational structure on Project Management effectiveness. </li>
        </ol>
    </body>
</html>

作为额外奖励：它也适用于旧浏览器（IE6 / 7 /等）。

Answer 2

我完全不确定你的用例，但有以下标记：

<ol>
    <li>
        <ol>
            <li>The first nested item</li>
            <li>The second nested Item</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>More nesting</li>
            <li>And even more...</li>
        </ol>
    </li>
</ol>

和CSS：

ol {
    list-style-position: outside;
    counter-reset: section;
    padding: 0.5em 1em;
    margin: 0 1em;
}
ol li {
    counter-increment: section;
}
ol li ol {
    counter-reset: subsection;
}

ol li ol li {
    counter-increment: subsection;
}

ol li:before {
    content: "Section: " counter(section);
    width: 3em;
    margin: 0 1em 0 0;
}

ol li ol li:before {
    content: counter(section) "." counter(subsection);
}

这当然是可能的（虽然我不确定你的问题是），但这里是JS Fiddle demo

<小时/> 已编辑以解决（以某种方式）第一次传递给我的文字换行问题。

我的方法是提供包含li position: relative;并将其向左移动1em，然后提供li:before内容position: absolute;和{{ 1}}（根据我的口味，这有点不干净，但它有效）。修订后的CSS如下：

left: -1em

附带revised JS Fiddle demo

Answer 3

好的，首先道歉误读了这个问题：对不起。

您可以通过给列表项添加一些填充，并将计数器放在填充内来获得所需的间距。

您可以通过创建一些可以绑定到不同计数器重置值的ID来参数化这些值

#counter-1
{
  counter-reset: 1;
}
#counter-2
{
  counter-reset: 2;
}
etc...

这需要一些工作，但我相信它有效。

Answer 4

实际上，在CSS 2.0和之前的版本中，这不是直接可行的 - 除了起始编号之外，你不能真正搞乱编号。

CSS 3.0可能会支持它，但我不确定浏览器是否支持CSS 3.0及更高版本。

用于将使用CSS样式化的OL列表的文本换行作为点状列表，例如， 1.1,1.2,1.3等

4 个答案: