html - 如何在彼此下方写下标和上标？

我正在尝试创建这样的东西，两个数字彼此叠加（下标和上标）：



如果不使用MathJax这样的复杂脚本，是否可以实现？

最佳答案

我将围绕这两个容器元素显示为内联表：

.supsubcontainer {
    display:inline-table;
    vertical-align:middle;
}
.supsubcontainer sup, .supsubcontainer sub {
    display:table-row;
}

<p><span class="supsubcontainer"><sup>220</sup> <sub>86</sub></span> Rn</p>

您可能需要使用内联表的line-height，font-size和vertical-align使其看起来完全像您想要的。