定位 images/symbols 在某些词的下面

Question

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

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 元素的 'left' 像素

定位 images/symbols 在某些词的下面

Positioning images/symbols underneath certain words

positioning

image

word