有序列表可以生成看起来像1.1,1.2,1.3(而不仅仅是1,2,3,...)的结果与css？

Question

有序列表是否可以使用CSS生成看起来像1.1,1.2,1.3(而不仅仅是1,2,3 ......)的结果？到目前为止,使用list-style-type:decimal只产生了1,2,3,而不是1.1,1.2.,1.3.

Answer 1

您可以使用计数器执行此操作:

以下样式表编号将列表项嵌套为"1","1.1","1.1.1"等.

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

例

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

有关更多信息,请参阅嵌套计数器和范围.

Answer 2

此页面上的所有解决方案都不能正确且普遍地适用于所有级别和长(包装)段落.由于标记的大小可变(1.,1.2,1.10,1.10.5,......),因此实现一致的缩进非常棘手.它不能只是"伪造",即使每个可能的缩进级别都有预先计算的边距/填充.

我终于找到了一个实际工作且不需要任何JavaScript 的解决方案.

它在Firefox 32,Chromium 37,IE 9和Android Browser上进行了测试.在IE 7和之前的版本上不起作用.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

例:

在JSFiddle上试一试,在Gist上分叉吧.

Answer 3

选择的答案是一个很好的开始,但它基本上强制list-style-position: inside;列表项上的样式,使得包装文本难以阅读.这是一个简单的解决方法,它还可以控制数字和文本之间的边距,并根据默认行为右对齐数字.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http ://jsfiddle.net/3J4Bu/

Answer 4

注意:使用CSS 在现代浏览器中创建嵌套编号.看到接受的答案.以下仅供参考.counters

如果浏览器支持content和counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Answer 5

这里发布的解决方案对我来说效果不佳,所以我对这个问题和以下问题进行了混合:是否可以在HTML中创建多级有序列表？

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

结果:

注意:截图,如果您希望查看源代码或此帖子中的内容:http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

Answer 6

在不久的将来，您也许能够使用::markerpsuedo-element只需一行代码即可获得与其他解决方案相同的结果。

请记住检查浏览器兼容性表，因为这仍然是一项实验性技术。在撰写本文时，只有 Firefox 和 Android 版 Firefox（从版本 68 开始）支持此功能。

如果在兼容的浏览器中尝试，下面是一个可以正确呈现的代码片段：

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

您可能还想查看smashingmagazine 发表的关于该主题的这篇精彩文章。

Answer 7

以下对我有用：

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

看看： http: //jsfiddle.net/rLebz84u/2/

或者这个http://jsfiddle.net/rLebz84u/3/ 包含更多且合理的文本