2023-12-13 05:00:04

只在CSS上标?

我怎么能得到上标做,只有在CSS?

我有一个样式表,我用上标字符标记外部链接,但我很难让字符正确对齐。

我目前拥有的是这样的:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

但这并不奏效。

当然,我会使用<sup>-标签,只有当内容允许HTML…


当前回答

这是另一个干净的解决方案:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

通过这种方式,你仍然可以使用sup/sub标签,但你固定了他们的愚蠢行为,总是把段落行高搞砸。

现在你可以这样做:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

而且你的段落行高不应该搞砸。

测试在IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

我测试使用p {line-height: 1.3;}(这是一个很好的行高,除非你想让你的行贴太近),它仍然有效,因为“-0.6em”是如此小的数量,也有了这个行高,子/子文本将适合,不会互相重叠。

忘记了一个可能相关的细节,我总是在我的页面的第一行使用DOCTYPE(特别是我使用HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01过渡// zh " "http://www.w3.org/TR/html4/loose.dtd">)。所以我不知道当浏览器处于quirkmode(或非标准模式)时,由于缺乏DOCTYPE或DOCTYPE不触发标准/几乎标准模式时,这个解决方案是否有效。

其他回答

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

你可以用vertical-align: super来做上标(加上相应的字体大小减小)。

但是,一定要阅读这里的其他答案,特别是保罗默里和cletus的答案,以获得有用的信息。

这是另一个干净的解决方案:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

通过这种方式,你仍然可以使用sup/sub标签,但你固定了他们的愚蠢行为,总是把段落行高搞砸。

现在你可以这样做:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

而且你的段落行高不应该搞砸。

测试在IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

我测试使用p {line-height: 1.3;}(这是一个很好的行高,除非你想让你的行贴太近),它仍然有效,因为“-0.6em”是如此小的数量,也有了这个行高,子/子文本将适合,不会互相重叠。

忘记了一个可能相关的细节,我总是在我的页面的第一行使用DOCTYPE(特别是我使用HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01过渡// zh " "http://www.w3.org/TR/html4/loose.dtd">)。所以我不知道当浏览器处于quirkmode(或非标准模式)时,由于缺乏DOCTYPE或DOCTYPE不触发标准/几乎标准模式时,这个解决方案是否有效。

如果你正在改变字体大小,你可能想用下面的规则停止缩小大小:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

查看:http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

如果你想要"vertical-align:text-top"