如何在OL中增加序列号的大小答案

【问题标题】：How to increase size of serial number in OL如何在OL中增加序列号的大小
【发布时间】：2011-12-23 05:07:42
【问题描述】：

我想在不增加内容文本字体大小的情况下增加OL中的数字大小。

这有什么问题以及如何纠正它：

<ol style="font-size:5em">
    <li style="font-size:1em">Hello </li>
</ol>

我想要的只是字体大小为 5em 的大数字 1，内容 Hello 的文本大小为 1em。

我也只需要使用内联样式。

【问题讨论】：

您希望ol 的数字为5em，但li 元素的文本为1em？

标签： html css

【解决方案1】：

li 元素的编号根据li 元素本身的 CSS 规则进行格式化；因此，要将数字设置为与文本不同的样式，您必须将文本本身包装到另一个元素中（在本例中为 span）：

<ol>
    <li><span>list element one</span></li>
    <li><span>list element two</span></li>
</ol>

CSS：

li {
    list-style: decimal-leading-zero;
    font-size: 5em;
    margin: 0 0 0 2em;
}

li span {
    font-size: 0.25em;
}

li {
  list-style: decimal-leading-zero;
  font-size: 5em;
  margin: 0 0 0 2em;
}
li span {
  font-size: 0.25em;
}

<ol>
  <li><span>list element one</span>
  </li>
  <li><span>list element two</span>
  </li>
</ol>

JS Fiddle demo.

如果您能够牺牲某些无法处理生成内容的旧浏览器，那么您可以改用：

<ol>
    <li>list element one</li>
    <li>list element two</li>
</ol>

和：

ol {
    counter-reset: listNumbering;
}

li {
    font-size: 1em;
    counter-increment: listNumbering;
}

li:before {
    content: counter(listNumbering,decimal-leading-zero) '.';
    font-size: 5em;
}

ol {
  list-style-type: none;
  counter-reset: listNumbering;
}
li {
  font-size: 1em;
  counter-increment: listNumbering;
}
li:before {
  content: counter(listNumbering, decimal-leading-zero)'.';
  font-size: 5em;
}

<ol>
  <li>list element one</li>
  <li>list element two</li>
</ol>

JS Fiddle demo.

重新审视这个答案，::marker 伪元素似乎开始被更广泛地采用（尽管在 Chrome 和 Edge 80+ 中的标志后面，截至撰写时）。这意味着在不久的将来它可能是比上述更好的选择：

li {
  /* something of a magic number to position the ::marker
     on the page: */
  margin-left: 2em;
}

/* the generated list-marker for the <li> element: */
li::marker {
  color: #f90;
  font-size: 5em;
}

请注意，下面的 sn-p 和上面的 CSS 需要兼容的浏览器，一些浏览器，例如 Chrome、Chromium 和 Edge 80 及以上版本需要启用enable-experimental-web-platform-features 标志，而在 Firefox 68+它应该可以工作）。

li {
  margin-left: 2em;
}

::marker {
  color: #f90;
  font-size: 5em;
}

<ol>
  <li>list element one</li>
  <li>list element two</li>
</ol>

JS Fiddle demo.

参考资料：

counter()。
counter-increment。
counter-reset。
::marker pseudo-element (compatibility)。

【讨论】：

不敢相信没有直接的 CSS 定位，仅针对 2017 年可能的数字，我们仍然需要“解决方法”。
好吧，@Kai，我们终于 - 几乎 - 到了那里。

【解决方案2】：

看到这个tutorial。

ol {
  font: 5em;
}

ol p {
  font: 1em;
}

【讨论】：

注意：该示例中的 p 实际上是 OP 标记中不存在的另一个元素。

【解决方案3】：

试试这样的：

<ol>
    <li style="font-size: 3em"><span style="font-size: .5em">Hello</span></li>
</ol>

【讨论】：

我的语法有什么问题？
我最初的答案是将样式应用于错误的元素。您希望将样式附加到<li> 和<span>，如当前所示。
@AgA - 因为当您设置li 的样式时，您也在设置有序列表分子的样式。 jsfiddle.net/F4cDm

【解决方案4】：

您可以使用 CSS 伪元素 ::marker。

OL LI::marker {
    font-size: 2em;
}

OL LI::marker {
    font-size: 2em;
}

<ol>
    <li>Hello</li>
</ol>

【讨论】：