同一元素的下标和上标

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 的宽度缩进以下文本：

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>

Answer 3

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

http://jsfiddle.net/a754h/

Answer 4

我使用以下内容：

.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 5

这是一个干净的解决方案。 创建两个 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”类作为 <nobr> 替代品。 现在要表达硫酸盐的分子式，请使用“supsub”类，如下所示：

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

也就是说，将您的上标/下标括在“supsub”类中，并在它们之间放置一个 <br /> 。 如果你喜欢你的上标/下标更大或更小，然后调整字体大小，然后修改垂直对齐和行高。 边距设置中的 -9em 是为了防止上标/下标添加到包含它们的行的高度； 任何大的价值都可以。

Answer 6

除了 Cyber​​Dude 的解决方案，这里还有一个例子，你可以使用 sup 和 sub 标签以及 css 和 flexbox。

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

.expression {
  display:flex;
  align-items: center;
}

.supsub {
  display: flex;
  flex-direction: column;
  margin-left: 2px;
}

.subscript {
  color: green; 
  display:flex;
}

.superscript {
  color: red; 
  display:flex; 
}

你可以在这里查看和测试这个JsFiddle

Answer 7

它也可以通过使用内联样式非常简单地完成。 具体来说： style='position: relative; left: -0.4em;' style='position: relative; left: -0.4em;'

所以一个例子是： u<sub>i</sub><sup style='position: relative; left: -0.4em;'>T</sup> u<sub>i</sub><sup style='position: relative; left: -0.4em;'>T</sup>

可以通过改变 left 后的值来改变位置。 它不会在这里重现，但在其他情况下它可以正常工作。