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 和 float 进行一些结构化，我能够使用 <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;
}