我的目標是在基本上任何頁面中動態（使用內容腳本）在文本上方注入圖像，并保持文本正常對齊。我注入圖像以使其具有特定屬性的跨度，并且我的腳本（chrome 擴展的內容腳本）將跨度與另一個跨度（我 css 中的父項）包裝在一起，該跨度具有 img（包裝在自己的跨度）也是如此。問題（CSS 問題）是當我注入圖像時，文本的文本內襯被破壞了。您可以在https://jsfiddle.net/wyfumrx6/2/ 中更清楚地看到這一切“a Good”這個詞沒有與文本的其余部分放在一起。這是我現在所做的，使用 inline-flex 和 flex-direction：HTML 示例：<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */">  <span id="div0" class="aui_top_in_page_parent" tabindex="0" style="">        <span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png"                class="aui_header_images"></span>  <span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How        </span>  </span>  <span id="div5" class="aui_top_in_page_parent" tabindex="0">        <span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png"                class="aui_header_images"></span>  <span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span></span> <span id="div6" class="aui_top_in_page_parent" tabindex="0"><span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png"                class="aui_header_images"></span><span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make</span></span>  a Good <span id="div7" class="aui_top_in_page_parent" tabindex="0"><span id="span7" class="aui_top_in_page"><img                src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span><span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span></span></a>在這里可以清楚地看到結果：https : //jsfiddle.net/wyfumrx6/我希望線條和文字在圖像位于“標記”字詞上方時保持直線，并且該圖像與上面的文本行有足夠的邊距，以便清楚 img 指的是哪個字。