HTML：我可以将下标文本放在上标的正下方吗？答案

【问题标题】：HTML: can I place subscript text right under the superscript?HTML：我可以将下标文本放在上标的正下方吗？
【发布时间】：2009-10-16 22:11:05
【问题描述】：

我有一个词，它有上标和下标。现在我像这样渲染它word<sub>1</sub><sup>2</sup> 并获得以下信息：

word₁².

如何将下标准确地放在上标之下？

【问题讨论】：

标签： html

【解决方案1】：

这是一个干净的解决方案。创建两个 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”类中，并在它们之间放置一个
。如果你喜欢你的上标/下标更大或更小，然后调整字体大小，然后修改垂直对齐和行高。边距设置中的 -9em 是为了防止上标/下标添加到包含它们的行的高度；任何大的价值都可以。

【讨论】：

【解决方案2】：

您可以通过多种方式使用 CSS 做到这一点，并且每种方式都有其优点和缺点。一种方法是使用相对定位。一个简单的例子可能是这样的：

<span class="fraction">
  <span class="numerator">3</span>
  <span class="denominator">4</span>
</span>

以及与之配套的 CSS：

span.fraction { }

/* Or child selector (>) if you don't care about IE6 */
span.fraction span.numerator { 
  position:relative;
  top:-0.5em;
}

span.fraction span.denominator {
  position:relative;
  top:0.5em;
  left:-0.5em; /* This will vary with font... */
}

如果您使用等宽字体，这个特定示例会更好。

【讨论】：

但是这里向左的偏移量取决于上标和下标的大小。但是如果提名者是 31234 而分母是 56547 呢？是否有一个不依赖于上标和下标大小的统一决策？
@netimen 这是一个很好的观点，在我整理了上面的示例后我想到了这一点。简而言之：不，没有神奇的价值。这是 CSS3 Ruby 模块可能派上用场的一个场合。
@netimen 可以使用 JavaScript 计算正确的偏移量，然后将其应用于上标/下标的每个实例。你想代表什么？分数？化合物？
我明白了。我可以使用表格来完成这项任务吗？ @Zack 我正在尝试表示句子中单词之间的联系）
虽然这违背了我的“网络开发人员直觉”，但我认为使用表格可能是您在这里可以做的最好的事情，特别是如果您希望数字彼此“居中”。

【解决方案3】：

使用 CSS 表格样式（IE8 及以下除外）。 HTML：

<span class="over-under">
  <span class="over">sup</span>
  <span class="under">sub</span>
</span>

CSS：

span.over-under {
  position: relative;
  top: 1em;
  display: inline-block;
}
span.over-under > .over {
  display: table-row;
}
span.over-under > .under {
  display: table-row;
}

小提琴：https://jsfiddle.net/FredLoney/Loxxv769/4/

除了比相对位置调整更简单之外，此解决方案还避免了由这些替代方案引起的布局扭曲。参见，例如，https://jsfiddle.net/FredLoney/da89nyk2/1/。

【讨论】：

【解决方案4】：

嗯，你不能用普通的 HTML 来做到这一点。就像已经提到的那样，使用 CSS。但是你也需要一些定位！

【讨论】：