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包裹在另一个跨度中，然后调整左对齐的垂直对齐。我增加了字体大小以提高可读性，还更改了左和右对齐类。

<!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上标和下标问题

2 个答案: