html - 如何在链接中添加上标

Question

.project-link {
font-family:Arial; 
display:inline-block;
color:#FFF;
font-size:5vw;
white-space:nowrap;
text-decoration:underline;
margin-right: 3%;
line-height:120%;
}
body {
  background-color: black;
}

<a class="project-link" id="one" href="#modal1">Maru Speaker Design <sup> (1) </sup> </a>
<

我试图让 (1) 成为上标。

编辑 https://jsfiddle.net/v1jn1nus/

添加了 Arial 字体的图片。

我就是不明白。它也适用于 fiddle ......

Answer 1

那是 vertical-align:super; 所以请检查您的样式是否没有在该元素上重置 vertical-align。

检查这个:

.project-link {
font-family:Arial; 
display:inline-block;
color:#FFF;
font-size:5vw;
white-space:nowrap;
text-decoration:underline;
margin-right: 3%;
line-height:120%;
}

.project-link > span { vertical-align:super; }

body {
  background-color: black;
}

<a class="project-link" id="one" href="#modal1">Maru Speaker Design <span> (1) </span> </a>
<