如何使標對齊到最後一個點的頂部

Question

如何顯示上標，使得它在圓點頂部？ 代碼這裏

<div >5.<sup>22</sup></div> 

Answer 1

Example

好。所以我查了一下，默認格式有兩個主要問題。

第一個是，<sup>跟隨期間，而不是在它之上。解決這個問題的最好方法可能是一個負邊界，因爲如果之後有更多的文本，相對位置會留下空隙。如果您使用像em這樣的相對大小而不是px，那麼如果大小應該改變，它將更容易調整。

接下來是獲取正常文本的頂部和<sup>頂部對齊。 <sup>的默認vertical-align實際上略高於該行的頂部，因此將其重置爲頂部幾乎可以讓您到達那裏。 然後調整行高來做其餘的工作就好了。

sup { 
    margin-left: -0.25em; 
    vertical-align: top; 
    line-height: 1.1; 
} 

Answer 2

嗯..這個工作，但我相信有人會找到一個更好的答案：

sup:before { 
 
    content: '.'; 
 
    display: inline-block; 
 
    position: absolute; 
 
    bottom: -7px; /* adjust with line-height */ 
 
    left: 0; 
 
} 
 

 
sup { 
 
    position: relative; 
 
    
 
}

<div >5<sup>22</sup></div>

我認爲它是一個風險，如果您的內容是完全動態，或者如果你有幾個線高。不管怎樣，使用div的行高調整底部位置。

Answer 3

您可以將<sup>移動到左側，像這樣：

sup { 
    position: relative; 
    left: -4px; 
}