包含许多元素的 HTML 部分 - 必须保持在一起答案

【问题标题】：HTML Section with many elements - must stay together包含许多元素的 HTML 部分 - 必须保持在一起
【发布时间】：2015-11-06 05:50:52
【问题描述】：

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

此外，这些垂直行中的 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>

【问题讨论】：

...不知道为什么图片这么大

标签： html css subscript superscript

【解决方案1】：

我对您的代码做了很多修改，但here 是有效的示例。

基本上，为了解决您的问题并将<sup> 和<sub> 放在100% 旁边，我将100% 浮动并设置了<sup> 和<sub> display:block。

为了让它们“彼此独立”，我通过将每个都包装在 <div> 块中来对它们进行划分。

【讨论】：