Question

我希望在不增加内容的字体大小的情况下增加OL的体积。

这样做有什么错误以及如何纠正:

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

我所希望的是一大批内容,其字体尺寸为5em。

此外,我只需要使用网上风格。

Answer 1

<代码>li各项内容的编号根据《编码指南>li各项内容》的《科学、社会、文化权利国际公约》规则编排;因此,编号与案文不同(在这种情况下,<代码>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。

If you re able to sacrifice certain older browsers that can t handle generated content, then you could use, instead:

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

and:

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和 Edge80+的旗帜下,截至撰写)。也就是说,在较近的将来,这一选择可能比上述选择好:

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;
}

请注意,以下几页——及以上CSS——需要一个兼容的浏览器,有些浏览器,如 Chrome、 Ch和 Edge,需要<条码>,可操作-可操作的万维网-波束式-features。国旗是允许的,而第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。

参考资料:

Answer 2

您可使用CSS pseudo-element :marker 。 (以下称呼)

ol li::marker {
    font-size: 2em;
}

ol li::marker {
  font-size: 2em;
  color: red;
}

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

Answer 3

See this tutorial.

ol {
  font: 5em;
}

ol p {
  font: 1em;
}

Answer 4

类似情况:

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

友情链接