Question

使用html（或css）是否可以在同一位置使用下标和上标？我试过这个

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

但是这会使上标16在下标16.00的左边，有没有办法让下标和上标一个在另一个上面？

请注意，我没有使用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和floats进行一些结构化后，我能够使用<sub>和<sup>元素复制图像。我的例子将所有元素都适合100px×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;
}

Answer 2

我认为使用绝对定位和em代替px可能会更复杂，更灵活。这是JSFiddle。

HTML：

<div class="container">
  <div class="edge">
    <span class="top left">16</span>
    <span class="top right">8</span>
  </div>
  <div class="element">
    <abbr>O</abbr>
    <div>Oxygen<div>
  </div>
  <div class="edge">
    <span class="bottom left">16.00</span>
    <span class="bottom right">(6)</span>
  </div>
</div>

CSS：

.container {
  height: 7em;
  width: 7em;
  border: .2em solid black;
  position: relative;
}

.element {
  text-align: center;
  margin-top: 1.5em;
}

abbr {
  font-size: 2em;
  font-weight: bold;
}

.edge span {
  position: absolute;
  padding: .4em;
}

.top    { top: 0; }
.bottom { bottom: 0; }
.right  { right: 0; }
.left   { left: 0; }

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

2 个答案:

HTML：

CSS：