HTML 上下标问题

Question

给定文本添加上标和下标没有按预期工作。然而，它完全按照文本之前的预期工作。

化学元素在原子符号前后使用上标和下标来指定质量数、原子序数、电荷和原子数。附图中给出了准确的描述。我使用的代码如下。

<!DOCTYPE html>
<html>
 <style>
    .right-align {
   display: inline-block;
   margin-bottom: -0.3em;
   vertical-align: -0.4em;
   line-height: 1.0em;
   font-size: 80%;
   text-align: right;
    }

    .left-align {
   display: inline-block;
   margin-bottom: -0.3em;
   vertical-align: 0.8em;
   line-height: 1.0em;
   font-size: 80%;
   text-align: left;
    }

    .super-sub {
   font-size: inherit;
   line-height: inherit;
   vertical-align: baseline;
    }
 </style>


 <body>
  <span style="white-space: wrap !important;">
   <span class="right-align">
    <sup class="super-sub">238</sup>
    <br/>
    <sub class="super-sub">92</sub>
   </span>U<span class="left-align">
    <sup class="super-sub">3-</sup>
    <br/>
    <sub class="super-sub">1</sub>
   </span>
  </span>
 </body>
</html>

没有错误消息。第一张图片显示了结果必须如何格式化。第二张图片实际格式如何（数字 1 推 3-）。

Answer 1

您可以将字母 U 换到另一个 span 中，然后调整左对齐的 vertical-align。我增加了 font-size 以获得更好的可读性，并且还更改了左右对齐类.

<!DOCTYPE html>
<html>
<html>
<style>
  .left-align {
    display: inline-block;
    margin-bottom: -0.3em;
    vertical-align: -0.4em;
    line-height: 1.0em;
    font-size: 150%;
    text-align: right;
  }
  
  .right-align {
    display: inline-block;
    margin-bottom: -0.3em;
    vertical-align: -0.4em;
    line-height: 1.0em;
    font-size: 150%;
    text-align: left;
  }
  
  .center-align {
    font-size: 150%;
    margin: 0.2em;
  }
  
  .super-sub {
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
  }
</style>

</html>

<body>
  <span style="white-space: wrap !important;">
            <span class="left-align">
                <sup class="super-sub">238</sup><br/>
                <sub class="super-sub">92</sub>
            </span><span class="center-align">U</span><span class="right-align">
                <sup class="super-sub">3-</sup><br/>
                <sub class="super-sub">1</sub>
            </span>
  </span>

</html>

Answer 2

您可能希望使用 flex 来简化事情：

body {
  font-size: 48px
}

.element {
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-end;
  height: 1.5em;
  line-height: 1.3
}

.element > * {
  font-variant: normal;
  font-size: .75em;
  line-height: 1;
}

.element>*:nth-child(3),
.element>*:nth-child(4) {
  align-self: flex-start
}

<span class="element">
  <sup>238</sup>
  <sub>92</sub>
  U
  <sup>3-</sup>
  <sub>1</sub>
</span>

HTML 上下标问题

HTML Superscript & Subscript Issue

html

css

superscript

subscript