html - 将下标和上标放在另一个之上

Question

使用 html（或 css）有没有办法在同一位置有下标和上标？我试过这个

<sup>16</sup><sub>16.00</sub>O

但这将使下标16.00左侧的上标16，有没有办法使下标和上标一个在另一个之上？

请注意，我没有使用 CSS3。

请注意，我尝试将此作为我的 CSS

.container {}

.sup { 
    position: relative;
    top: 0.5em;
}

.sub {
    position: relative;
    top: 0.5em;
    left: -0.5em;
}

以此作为 html

<span class='sup'>3</span><span class='sub'>4</span>

哪个有效，但这取决于数字的长度。这看起来不对

<span class='sup'>16</span><span class='sub'>16.000</span>

因为上标有 2 位数字，而下标有 6 位数字。有没有办法让它们正确对齐？我试着做

.container {
   text-align: right;
}

但这没有用。

Answer 1

通过使用 div 和浮点数进行一些结构化，我能够使用<sub>和<sup>元素复制图像。我的示例将所有元素放入一个 100px x 100px 的正方形中。如果那个盒子需要更小或可以更大，那么显然需要一些细微的调整。

这也是所有 CSS2 规范，没有使用 CSS3，因此没有兼容性问题。

JSFiddle

HTML：

<div class="box">
    <div class="superscripts">
        <sup class="sup-left">16</sup>
        <sup class="sup-right">8</sup>
    </div>
    <div class="element"><abbr>O</abbr><br /> Oxygen</div>
    <div class="subscripts">
        <sub class="sub-left">16.00</sub>
        <sub class="sub-right">(6)</sub>
    </div>
</div>

CSS：

.box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
}

.element {
    text-align: center;
    clear: both;
    height: 60px;
}

.element abbr {
    font-size: 28px;
    font-weight: bold;
}

.superscripts,
.subscripts {
    height: 18px;
}


.superscripts .sup-left {
    float: left;
    padding: 2px 0 0 2px;
}

.superscripts .sup-right {
    text-align: right;
    float: right;
    padding: 2px 2px 0 0;
}
.subscripts .sub-left {
    float: left;
    padding: 4px 0 2px 2px;
}

.subscripts .sub-right {
    text-align: right;
    float: right;
    padding: 4px 2px 2px 0;
}