问题下标和上标为同一元素

有没有办法将下标和上标添加到同一个元素？如果我做

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>

它似乎做了这项工作，但非常难看。还有更好的想法？

谢谢！

3530

2017-09-18 18:42

起源

你究竟想要实现什么目标？我猜你应该看看MathML，但是你的例子被抽象得太过分了。 - Quentin

这只是我希望以特定方式显示的一些数据。没有什么特别的数学，物理，化学等等。我检查了MathML，但IE本身不支持它，这意味着我无法使用它。 - Amati

答案:

我不是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}

2017-09-18 19:10

谢谢，正是我需要的！您可能希望在此处包含您的代码，以防任何人遇到相同的问题，因为jsfiddle版本可能会被删除。 - Amati

.supsub {position：absolute} .subscript {color：green;显示：块;位置：相对;左：2px的;顶部：-5px} .superscript {颜色：红色;显示：块;位置：相对;左：2px的;顶部：-5px}示例文本 Sup Sub - CyberDude

抱歉格式化 - 不在评论中工作，我不会添加新的答案 - CyberDude

您可以编辑现有答案。反正好的解决方案。 - Nikita Rybak

如果你现在正在看这个，请查看托马斯的回答。它解释了前进文本中的下标和上标。恕我直言最好的解决方案:) - Thornkey

这个类似于CyberDudes方法，另外它根据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>

2017-07-23 10:35

好吧，你可以指定位置 sup 关系到 Sample Text是正确的边界。

http://jsfiddle.net/a754h/

2017-09-18 18:50

不太可选择。 MathML会更好，尽管它没有被广泛支持。 - Ben Shelock

本，请问“不是很容易选择”是什么意思？你的意思是，如果有人想要复制/粘贴数据？ - Amati

当sup比sub更长时，似乎失败（相对于期望），然后文本继续。在此示例中，宽度由sub确定。超级位置，但不扩展边界框。 - ivo Welch

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

.nobr {
   white-space: nowrap;
}
.supsub {
   display: inline-block;
   margin: -9em 0;
   vertical-align: -0.55em;
   line-height: 1.35em;
   font-size: 70%;
   text-align: left;
}

您可能已经将“nobr”类作为替换。现在来表达硫酸盐的分子式，使用“supsub”类如下：

<span class="nobr">SO<span class="supsub">2-<br />4</span></span>

也就是说，将你的上标/下标括在“supsub”类中，并在它们之间加上一个 。如果你喜欢你的上标/下标有点大或小，那么调整字体大小，然后修改vertical-align和line-height。边距设置中的-9em是为了防止上标/下标添加到包含它们的行的高度;任何大的价值都可以。

2018-06-10 08:48

问题 下标和上标为同一元素

答案:

热门问题

问题下标和上标为同一元素