Question

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

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

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

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

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

Answer 1

根据li元素本身的CSS规则格式化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

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

<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

Answer 2

尝试这样的事情：

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

Answer 3

请参阅此tutorial。

ol {
  font: 5em;
}

ol p {
  font: 1em;
}

Answer 4

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

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

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

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

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

4 个答案: