下标和上标为同一元素

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

我使用以下内容：

.supsub {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    vertical-align: middle;
}

<span class="supsub">
    <span>sup</span>
    <span>sub</span>
</span>

Answer 3

那么，您可以指定sup相对于 的Sample Text右边框的位置。

http://jsfiddle.net/a754h/

Answer 4

这类似于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>