同一元素的下标和上标

Question

是否可以将下标和上标都添加到同一元素？如果我这样做

Sample Text<sub>Sub</sub><sup>Sup</sup>

上标出现在下标之后。我想我要做的是做类似的事情：

<table>
    <tr>
        <td rowspan='2' valign='center'>Sample Text</td>
        <td>Sup</td>
    </tr>
    <tr>
        <td>Sub</td>
    </tr>
</table>

它似乎可以完成工作，但是非常难看。还有更好的主意吗？

谢谢！

Answer 1

我不是CSS专家，但您可以尝试按http://jsfiddle.net/TKxv8/1/的方法进行操作>

有很多硬编码的值，并且可能在之后才发现对周围其他元素的影响，但这是一个很好的起点。

Sample Text 
<span class='supsub'>
    <sup class='superscript'>Sup</sup>
    <sub class='subscript'>Sub</sub>
</span>

.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

Answer 2

这类似于Cyber​​Dudes方法，另外，它根据sub和sup的宽度缩进以下文本：

Answer 3

好，您可以指定sup相对于Sample Text右边界的位置。

Answer 4

这里是一个干净的解决方案。创建两个CSS类：

Answer 5

除了Cyber​​Dude的解决方案之外，还有一个示例，您可以在flexbox中使用sup和sub标签以及css。