html - 同一元素的下标和上标

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

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

http://jsfiddle.net/jwFec/1/

Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br />

<style>
.supsub {
    display: inline-block;
}

.supsub sup,
.supsub sub {
    position: relative;
    display: block;
    font-size: .5em;
    line-height: 1.2;
}

.supsub sub {
    top: .3em;
}
</style>