Question

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

word₁².

如何将下标正好放在上标下？

Answer 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”类作为＆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 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... */
}

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

Answer 3

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

<activity
    android:name=".activities.FloatingActivity"
    android:label="@string/title_activity_floating"
    android:theme="@style/Theme.AppCompat.Dialog" >
</activity>

CSS：

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

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

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

Answer 4

嗯，你不能用普通的HTML语言做到这一点。就像它被提到的那样，使用CSS。但是你还需要一些定位！

HTML：我可以将下标文本放在上标下吗？

4 个答案: