如何使上标与最后一个点的顶部对齐

Question

如何显示上标以使其位于点的顶部？ 代码在这里

<div >5.<sup>22</sup></div>

Answer 1

Example

好。所以我查了一下，默认格式有两个主要问题。

首先，<sup>跟随时期，而不是在它之上。解决这个问题的最佳方法可能是负边际，因为如果之后有更多文本，相对位置会留下空白。如果您使用em而不是px的相对大小，则可以更轻松地调整大小是否应该更改。

接下来是获取正常文本的顶部，<sup>在顶部对齐。 vertical-align的默认<sup>实际上略高于该行的顶部，因此将其重置为顶部几乎可以帮助您。 然后调整行高以完成剩下的工作就好了。

sup {
    margin-left: -0.25em;
    vertical-align: top;
    line-height: 1.1;
}

Answer 2

嗯..这很有效，但我相信有人会找到更好的答案：

sup:before {
    content: '.';
    display: inline-block;
    position: absolute;
    bottom: -7px; /* adjust with line-height */
    left: 0;
}

sup {
    position: relative;
    
}

<div >5<sup>22</sup></div>

如果您的内容是完全动态的，或者您有多个行高，我认为这会带来风险。无论如何，调整底部位置与div的行高。

Answer 3

您可以将<sup>移动到左侧，如下所示：

sup {
    position: relative;
    left: -4px;
}