html – 上标下划线随文字移动

我有 HTML代码：

<div id="blah">
   We have winner of 1<sup>st</sup> Tournament
</div>

用css

#blah{
text-decoration:underline;
}

但这会将st向下移动到顶部并且看起来很奇怪.有什么办法可以使用css修复它

解决方法

这很简单
试试这个

#blah sup{
display:inline-block;
border-bottom:1px solid #000;
padding-bottom:2px;//as per your requirement
}