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

Question

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

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

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

我想要的只是大号1,字体大小为5em,内容Hello的文本大小为1em.

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

Answer 1

所述的数字li元件根据对CSS规则格式化li元素本身; 因此,要将数字设置为不同于您必须将文本本身包装到另一个元素中的文本(在本例中为a 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小提琴演示.

如果您能够牺牲某些无法处理生成内容的旧浏览器,那么您可以使用,而不是:

<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小提琴演示.