将图像/符号放在某些单词下

Question

我正在尝试将符号（图像）放置在上方一行中某些单词的下方。最好的方法是什么？这是一个语法示例，因此在不同的屏幕尺寸下图像/符号不要四处移动非常重要。

HTML：

Præsens:<i> Susanne take<b>s</b> you down to her place near the river.</i><br>
<img src="https://i.ibb.co/7RsB2B8/subjekt.png" style="width:25px;height:25px;" />   <img src="https://i.ibb.co/QbYvTrY/verballed.png" style="width:25px;height:25px;" />

这里是一个JSfiddle：https://jsfiddle.net/kmfd45gh/

Answer 1

我认为绝对定位是唯一的选择：

<div style="position:relative;">
  Præsens:<i> Susanne take<b>s</b> you down to her place near the river.</i><br>
  <img src="https://i.ibb.co/7RsB2B8/subjekt.png"
    style="width:25px;height:25px; position: absolute; left:80px;"/>   
  <img src="https://i.ibb.co/QbYvTrY/verballed.png"
    style="width:25px;height:25px; position:absolute; left:120px;"/>
</div>

通过反复试验最终确定每个img元素的'左'像素