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>和旁邊的100％<sub>，我在漂浮的100％，取得了<sup>和<sub>display:block。

爲了讓它們「彼此獨立」，我將它們分別包裝在一個<div>塊中。