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

Question

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

word12 .

如何才能将下标恰好放在上标下？

Answer 1

那么，你不能用普通的香草HTML做到这一点。就像上面提到的那样，使用CSS。但是你会想要一些定位！

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类：

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

使用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/。