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

我有一个单词，它有上标和下标。现在我将它呈现为这样的

word12

并获取以下内容：

word₁².

---

我怎样才能把下标放在上标的正下方呢？

好吧，用普通的HTML是做不到的。就像前面提到的，使用CSS。但是你也需要一些定位

使用CSS有很多方法可以做到这一点，每种方法都有其优缺点。一种方法是使用相对定位。下面是一个简单的示例：

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

---

如果使用单间距字体，这个特定的示例会更好

这是一个干净的解决方案。创建两个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>

SO2-
4

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

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

小提琴：

---

除了比相对位置调整更简单之外，此解决方案还避免了由这些备选方案引起的布局扭曲。例如，请参见。

，但此处左侧的偏移取决于上标和下标的大小。但若提名人是31234，分母是56547呢？有没有一个统一的决定不取决于上标和下标的大小？网友们这是一个很好的观点，我在想出上面的例子后想到了这一点。简言之：不，没有神奇的价值。在这种情况下，CSS3 Ruby模块可能会派上用场。@netimes可以使用JavaScript计算正确的偏移量，然后将其应用于super/subscript的每个实例。你想代表什么？分数？化合物？我明白了。我可以用桌子来完成这项任务吗@Zack我试图用一句话来表达单词之间的联系）虽然这违背了我的“web开发人员本能”，但我认为在这里使用表格可能是最好的选择，特别是如果您希望数字彼此“居中”。

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

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

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