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

How to increase size of serial number in OL

提问by AgA

I want to increase the size of the number in OL without increasing the font size of the text of the content.

我想增加OL中数字的大小而不增加内容文本的字体大小。

What is wrong with this and how to correct it:

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

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

All I want is big number 1 with font-size of 5em with 1em text size of the content Hello.

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

Also I need to use only inline style.

另外我只需要使用内联样式。

回答by David says reinstate Monica

The numbers of the lielements are formatted according to the CSS rules for the lielements themselves; therefore to style the numbers differently to the text you have to wrap the text itself into another element (in this case a span):

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

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

CSS:

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.

JS小提琴演示。

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.

JS小提琴演示。

回答by Joe C.

Try something like this:

尝试这样的事情：

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

回答by Jason

See this tutorial.

请参阅本教程。

ol {
  font: 5em;
}

ol p {
  font: 1em;
}