HTML 包含很多元素的部分 - 必须放在一起

Question

我需要显示一段包含如下内容的文本：

此外，这些垂直数据行中的 3 行需要在页面上。都是相互独立的。如果页面大小发生变化，我很难弄清楚如何排列所有内容并将各个部分保持在一起。如果 CSS 和 HTML 不是要走的路，我可以接受。感谢所有想法。

这是我要使用的 CSS 和 HTML 代码。

    #leveltitle
    {
        font-size: 17.5px;
        margin: 0% 0% 0% 0%;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border: 0.5px solid black;
    }
    #leveldisplay
    {
        font-size: 80px;
        line-height: 90%;
        margin: 0% 0% 5% 0%;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border: 0.5px solid black;
    }
    #unitmarker
    {
        font-size: 30px;
        line-height: 90%;
        margin: 0% 0% 5% 0%;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border: 0.5px solid black;
    }
    #displayindicator
    {
        font-size: 20px;
        line-height: 90%;
        font-weight: bold;
        border: 0.5px solid black;
        display: block;
        position: relative;
    }

    <h1 id="leveldisplay">100.0
      <span  id="unitmarker">%</span>
      <span>
        <sup id="displayindicator" style="color: red;">TOP</sup>
        <sub id="displayindicator" style="color: green;">BOTTOM</sub>
      </span>
    </h1>

Answer 1

我对你的代码做了很多修改，但 here 是工作示例。

基本上，为了解决您的问题并让 <sup> 和 <sub> 靠近 100%，我将 100% 浮动并制作了 <sup> 和 <sub> display:block.

为了让它们 "independent from one another"，我通过将每个包装在 <div> 块中来将它们分开。

HTML 包含很多元素的部分 - 必须放在一起

HTML Section with many elements - must stay together

html

css

superscript

subscript