【问题标题】: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.

参考资料:

【讨论】:

  • 不敢相信没有直接的 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>

【讨论】:

  • 我的语法有什么问题?
  • 我最初的答案是将样式应用于错误的元素。您希望将样式附加到&lt;li&gt;&lt;span&gt;,如当前所示。
  • @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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-27
    • 2021-09-24
    • 2021-07-13
    • 2014-09-17
    • 1970-01-01
    相关资源
    最近更新 更多