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

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

Answer 3

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

http://jsfiddle.net/a754h/

Answer 4

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

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

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

Answer 5

我使用以下内容：

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

除了CyberDude的解决方案之外，还有一个示例，您可以将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;'

例如：u<sub>i</sub><sup style='position: relative; left: -0.4em;'>T</sup>

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

下标和上标为同一元素

7 个答案: