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